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

Posted 2023-05-08

【中文标题】Jquery sortable + draggable无法获得正确的事件目标ID

【英文标题】：Jquery sortable + draggable not able to get correct event target id

【发布时间】：2021-04-30 23:31:42

【问题描述】：

我正在尝试构建一个表单构建器，它可以拖动 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();

【参考方案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>

【讨论】：

这对我不起作用。我只需要删除 div id。

在小提琴中，您可以看到当您将“Div”拖到主容器时它可以工作。它显示主容器警报，但是当我们将 Div 拖到主容器然后到子容器时，它仍然将目标显示为主容器。

在我的 sn-p 中：我认为它按预期工作，拖动到 master 显示 master 然后拖动到 child 它显示 child，你能解释一下这是怎么回事，可能是我没有得到问题正确

@NayasSubramanian ，请参阅已编辑的 jsfiddle.net/bRIMOs/kh9xntup/1 刚刚替换 stop 为 recieve ，在我的理解中它现在可以工作了！

@NayasSubramanian 它像发布的 sn-p 一样工作，如果不是，可能是浏览器中的问题？