Jquery sortable + draggable无法获得正确的事件目标ID

Question

我正在尝试构建一个表单构建器，它可以拖动 div 并一个接一个地放置，还可以在其中放置输入控件。

它可以对控件进行排序。 （参考下图：图片）首先我拖动两个 Div 容器并将其放在主容器中。之后，当我尝试将 Div2 放在 Div1 中时，我无法获取事件目标 ID。

仅当两个 div 位于主容器内时才会发生这种情况。当我从字段类型中将一个 div 拖放到另一个上时，我得到了正确的目标 ID。

See Fiddle :

要重新创建，首先将 Div 拖动到 mastercontainer(id)，然后尝试将其拖动到 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

你只是错过了正确的事件，因为stop()，一旦你在容器之间拖动，就会显示拖动开始的目标，

因此您可以使用recieve() 事件来捕捉最后一次更改发生的位置，如下所示：

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

参见下面的 sn-p ：

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>