【发布时间】：2020-11-03 23:35:28
【问题描述】：
我是 jQuery 的新手。我有拖放的要求，我将 id 为“parent1、parent2 和 parent3”的“3 个可拖动 div”拖放到“容器 div drop-parent”中。
场景： 当我在容器 div 'drop-parent' 上拖动 id 为 'parent1' 的 div 时，它会被丢弃，但是当我选择 'parent 2' div 来丢弃它时，它无法替换 div 'parent1' 并进入其初始状态位置。请参考下面的 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>【问题讨论】：
-
请参考更新的JS链接：output.jsbin.com/zafoqodaxa
-
首先你运行 $this.droppable("disable") 当你把一个项目放在函数 Dropped()已经有一个
-
好的，谢谢！但我的要求是 3 个可拖动的 div 父 1、父 2 和父 3 应该在放置时相互交换并将它们的数据 ID 存储到文本输入中。我也分享了代码 sn-p。
-
@NicoShultz 我试过了，但对我没用。
标签： html jquery css drag-and-drop