Jquery sortable + draggable not able to get correct event target id

Question

I am trying to build a form builder that can drag div and place one after another and can also place input controls inside it.

It can sort the controls. (refer below : picture) First I drag two Div container and place it inside the master container. After that when I try to place Div2 inside Div1 I am not able to get the event target id.

This happens only when two div's are inside the master container. When I drag and drop one div over another from field types I get the correct target id.

See Fiddle :

To recreate first drag Div to mastercontainer(id) first then try to drag it childcontainer(id)

   $('.containerHolder').sortable({
        connectWith: '.containerHolder',
        scroll: false,
        revert: true,
        zIndex: 10000,
        helper: "clone",
        placeholder: "control-placeholder",
        stop: function (event, ui) {
            alert(event.target.id); 
          
        }
    });

    $("#fieldTypes li").draggable({
        connectToSortable: ".containerHolder",
        helper: "clone",
        revert: "invalid",
    });

    $(".containerHolder").disableSelection();

Answer 1

You just missed the right event , because stop(), will just show, once you drag between containers the target where the drag starts ,

so you can use recieve() event to catch where the last change occurred as folow :

receive: function(e, ui) {
    alert(e.target.id)
  }

see below snippet :

var MasterContainer = {
  "title": "Untitled Form",
  "description": "Description of the form goes here",
  "controls": []
};



$('.container').sortable({
  connectWith: '.container',
  scroll: false,
  zIndex: 10000,
  placeholder: "control-placeholder",
  receive: function(e, ui) {
    alert(e.target.id)
  }
});

$("#container1, #container2").draggable({
  connectToSortable: ".container",
  helper: "clone",
  revert: "invalid",
});


$(".container").disableSelection();

.container {
    min-height: 200px;
    background-color: #4474FF;
    border: 1px solid #1E44B2;
    border-radius: 2px;
    display: inline-block;
    padding: 10px;
}

.container1 {
  display: inline-block;
}


.container .container {
    min-height: 100px;
    background-color: #45FF41;
    border: 1px solid #04B200;
    display: block;
    width: 200px;
    margin-bottom: 5px;
}

.item {
    background-color: #FFCB44;
    border: 1px solid #B2840C;
    margin-bottom: 5px;
    border-radius: 2px;
    padding: 15px 50px;
}
.item1 {
    background-color: #FFCB44;
    border: 1px solid #B2840C;
    margin-bottom: 5px;
    border-radius: 2px;
    padding: 10px 30px;
    width: 30px;
    
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="container1">
  <div id="container1" class="item1">Div</div>
  <div id="container2" class="item1">List</div>
  <div id="container3" class="item1">Button</div>
</div>

<div id="masterConatiner" class="container">
  master container
  <div class="item"></div>
  <div id="childContainer" class="container">
    ChildContainer

  </div>

</div>