无法更改拖放时拖动的项目
Posted
技术标签:
【中文标题】无法更改拖放时拖动的项目【英文标题】：Unable to change the dragged item on drop 【发布时间】：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" />
</div>
</div>
</body>
</html>【问题讨论】：
请参考更新的JS链接：output.jsbin.com/zafoqodaxa 首先你运行 $this.droppable("disable") 当你把一个项目放在函数 Dropped()已经有一个 好的，谢谢！但我的要求是 3 个可拖动的 div 父 1、父 2 和父 3 应该在放置时相互交换并将它们的数据 ID 存储到文本输入中。我也分享了代码 sn-p。 @NicoShultz 我试过了，但对我没用。 【参考方案1】：我已经编辑了 Dropped() 函数，以便它将身体上的所有旧元素移回其父元素，然后添加新元素。
$(".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" />
</div>
</div>
</body>
</html>【讨论】：
以上是关于无法更改拖放时拖动的项目的主要内容，如果未能解决你的问题，请参考以下文章