無法更改拖放時拖動的項目
[英]Unable to change the dragged item on drop
問題描述
我是 jQuery 的新手。 我有拖放的要求，我將 id 為“parent1、parent2 和 parent3”的“3 個可拖動 div”拖放到“容器 div drop-parent”中。
場景：當我在容器 div 'drop-parent' 上拖動 id 為 'parent1' 的 div 時，它會被丟棄，但是當我選擇 'parent 2' div 來丟棄它時，它無法替換 div 'parent1' 並到達其初始 position。 請參閱下面的 JSBin 鏈接以獲取相同的 [點擊這里]
$(".child").draggable({ revert: "invalid", containment: ".drag_drop_container" }); $('.drop-parent').droppable({ accept: ".drag-parent >.child", drop: function(event, ui) { Dropped($(this), ui.draggable.click()); } }); $('.drag-parent').droppable({ accept: function(draggable) { if($(this).attr('id').split('parent')[1] == draggable.attr('data-id')) { return true; } }, drop: function(event, ui) { Reverted($(this), ui.draggable.click()); } }); function Dropped($this, $item) { $item.css({'left': '0px', 'top': '0px'}); $this.droppable("disable").css('opacity',0.9);; if($item.parent().hasClass('drop-parent')) { $item.parent().droppable("enable"); } else { $('.text-input').val($item.attr('data-id')); } $this.append($item); $this.sortable(); } function Reverted($this, $item) { $item.css({'left': '0px', 'top': '0px'}); $item.parent().droppable("enable"); $this.append($item); $('.droped_val').val(''); }
.drop-parent { //border: 1px solid red;important: /* background-color; red: */ //width; 640px. /*can be in percentage also:*/ height; 42px: width; 100px: //margin; 0 auto: left;-4px: //padding; 10px: top;184px: position; relative. }:dragbody { //border; 1px solid blue:important; /* background-color: red; */ //width: 281px; //position: relative; //height: 53px; }
<:DOCTYPE html> <html> <head> <script src="https.//emea.focusvision.com/survey/selfserve/2140/190505/drag1:js"></script> <script src="https.//emea.focusvision.com/survey/selfserve/2140/190505/drag2:js"></script> </head> <body> <div class="drag_drop_container"> <div class="cards"> <table align="center" class="Table1"> <tr> <td> <div class="drag-parent" id="parent1"> <div class="child" data-id=1><img src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/happy:png"/></div> </div> </td> <td> <div class="drag-parent" id="parent2"> <div class="child" data-id=2><img src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/neutral:png"/></div> </div> </td> <td> <div class="drag-parent" id="parent3"> <div class="child" data-id=3><img src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/sad:png"/></div> </div> </td> </tr> </table> </div> <div align="center" class="dragbody"> <div align="center" class="drop-parent"> </div> <img src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/body.png" width="250px"/> </div> </div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2020-07-20 08:26:48
我已經編輯了Dropped() function 以便它將身體上的所有舊元素移回其父元素，然后添加新元素。
$(".child").draggable({ revert: "invalid", containment: ".drag_drop_container" }); $('.drop-parent').droppable({ accept: ".drag-parent >.child", drop: function(event, ui) { Dropped($(this), ui.draggable.click()); } }); $('.drag-parent').droppable({ accept: function(draggable) { if ($(this).attr('id').split('parent')[1] == draggable.attr('data-id')) { return true; } }, drop: function(event, ui) { Reverted($(this), ui.draggable.click()); } }); function Dropped($this, $item) { $item.css({ 'left': '0px', 'top': '0px' }); if ($item.parent().hasClass('drop-parent')) { $item.parent().droppable("enable"); } else { $('.text-input').val($item.attr('data-id')); } for (i = 0; i < $this.children().length; i++) { $oldElement = $($this.children()[i]); $("#parent" + $oldElement.data("id")).append($oldElement); } $this.append($item); $this.sortable(); } function Reverted($this, $item) { $item.css({ 'left': '0px', 'top': '0px' }); $item.parent().droppable("enable"); $this.append($item); $('.droped_val').val(''); }
.drop-parent { //border: 1px solid red;important: /* background-color; red: */ //width; 640px. /*can be in percentage also:*/ height; 42px: width; 100px: //margin; 0 auto: left;-4px: //padding; 10px: top;184px: position; relative. }:dragbody { //border; 1px solid blue:important; /* background-color: red; */ //width: 281px; //position: relative; //height: 53px; }
<:DOCTYPE html> <html> <head> <script src="https.//emea.focusvision.com/survey/selfserve/2140/190505/drag1:js"></script> <script src="https.//emea.focusvision.com/survey/selfserve/2140/190505/drag2:js"></script> </head> <body> <div class="drag_drop_container"> <div class="cards"> <table align="center" class="Table1"> <tr> <td> <div class="drag-parent" id="parent1"> <div class="child" data-id=1> <img data-parent-id="1" src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/happy:png" /> </div> </div> </td> <td> <div class="drag-parent" id="parent2"> <div class="child" data-id=2> <img data-parent-id="2" src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/neutral:png" /> </div> </div> </td> <td> <div class="drag-parent" id="parent3"> <div class="child" data-id=3> <img data-parent-id="3" src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/sad:png" /> </div> </div> </td> </tr> </table> </div> <div align="center" class="dragbody"> <div align="center" class="drop-parent"> </div> <img src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/body.png" width="250px" /> </div> </div> </body> </html>
如何使用 HTML 為正在拖動的項目設置樣式 5 拖放 API
[英]How to style the item being dragged with HTML 5 Drag And Drop API
如何在javascript拖放中傾斜/旋轉被拖動的項目？
[英]How to tilt/rotate the item being dragged in javascript drag and drop?
jQuery：拖放的項目在放入具有可調整大小選項的另一個項目后被隱藏
[英]JQuery: Dragged item is getting hidden after drop into another item with resizable option
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.