javascript - 为什么第一个..draggable类下降两次？(Why first ..draggable classes drops twice?)

Question

I have two container left side , right side , I drag element from left and puts in right side, the left side container has two types one is cloned after drag and another removed , so I have placed two drag drop , first one is dropping twice .

(我有两个容器左侧，右侧，我从左侧拖动元素并放到右侧，左侧容器有两种类型，一种是拖动后克隆，另一种是移除，所以我放置了两个拖放，第一个拖放两次。)

Cloned after dragged:

(拖动后克隆：)

<ul class='list-inline edit_audit_container edit_draggable elementUl>
<li class='item'>
<input type='text' readonly>
</li>
</ul>

This one removed after dragged:

(拖动后将其删除：)

<ul class='list-inline audit_container draggable elementUl>
<li class='item'>
<input type='text' readonly>
</li>
</ul>

Dragged in this container

(拖到这个容器里)

<div class="wid30c1 border droppable draggablemain">                                    
 </div>

image link : https://prnt.sc/q3skww

(图片链接： https : //prnt.sc/q3skww)

 $(function () { $('.draggable').draggable({ revert: "invalid", stack: "0", helper: 'clone' }); // above codes drops twice $('.edit_draggable').draggable({ revert: "true", stack: "0" }); $('.droppable').droppable({ accept: ".draggable,.edit_draggable", drop: function (event, ui) { $(this).find("input").remove(); var droppable = $(this); var draggable = ui.draggable; draggable.clone().appendTo(droppable); $(this).find("input").attr("name", "headercols[]"); } }); }); 

  ask by Arnav Pundir translate from so

Answer 1

Here is an example.

(这是一个例子。)

 $(function() { $('.draggable').draggable({ stack: "0", start: function(e, ui) { console.log("Drag Start", ui.helper.attr("class")); } }); $('.edit_draggable').draggable({ stack: "0", helper: 'clone', start: function(e, ui) { console.log("Drag Start", ui.helper.attr("class")); } }); $('.droppable').droppable({ accept: "ul[class*='draggable']", drop: function(event, ui) { $(this).html(""); var droppable = $(this); var draggable = ui.draggable; console.log("Drop", draggable.attr("class")); var c = draggable.clone().attr("style", "").appendTo(droppable); if (draggable.hasClass("draggable")) { draggable.remove(); } $(this).find("input").attr("name", "headercols[]"); } }); }); 

 .left-col { width: 170px; float: left; } .list-inline { list-style: none; padding: 0; } .list-inline input { border-radius: 3px; padding: 6px; } .border { border: 1px solid #ccc; border-radius: 3px; } .droppable { width: 300px; height: 120px; margin: 20px; margin-left: 225px; padding: 3px; } .draggable input { border: 1px solid blue; } .edit_draggable input { border: 1px solid red; } 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="left-col"> <ul class='list-inline edit_audit_container edit_draggable elementUl'> <li class='item'> <span class="ui-icon ui-icon-grip-dotted-vertical"></span><input type='text' readonly> </li> </ul> <ul class='list-inline audit_container draggable elementUl'> <li class='item'> <span class="ui-icon ui-icon-grip-dotted-vertical"></span><input type='text' readonly> </li> </ul> </div> <div class="wid30c1 border droppable draggablemain"> </div> 

You will have slightly different drop conditions for a clone versus the actual draggable.

(与实际的可拖动对象相比， clone放置条件会稍有不同。)