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

问题描述

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

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

只有当主容器中有两个 div 时才会发生这种情况。当我从字段类型中将一个 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",revert: "invalid",});

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

解决方法

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

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

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

见下面的片段：

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>