gpt4 book ai didi

jquery - 使用 jQuery 拖放交换

转载 作者:行者123 更新时间:2023-11-28 01:16:34 26 4
gpt4 key购买 nike

我想知道如何使用 jQuery 进行拖放交换。我有 3 个父 div,我有 2 个子 div。我希望子 div 可以在没有子 div 的父 div 中放置,但我不希望任何父 div 能够存储 2 个子 div。如果一个子 div 被拖到一个带有子 div 的父 div 中,我希望两个子 div 交换。我可以使用 jQuery UI,因为下面的代码包含它。

$("document").ready(function() {
$(".child").draggable({
revert: true
});
$(".parent").droppable({
accept: '.child',
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
});*
.parent {
float: left;
margin-left: 5px;
height: 200px;
width: 200px;
border: 3px solid black
}
#child1 {
height: 50px;
width: 50px;
background-color: khaki;
}
#child2 {
height: 50px;
width: 50px;
background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="parent">
<div class="child" id="child1"></div>
</div>
<div class="parent">
<div class="child" id="child2"></div>
</div>
<div class="parent">
</div>

任何帮助,尤其是代码形式的帮助,我们将不胜感激。

jsfiddle:https://jsfiddle.net/g2efds1z/10/

最佳答案

好吧,你必须将已经在一个内部的元素移动到另一个内部,所以我首先要在你的 drop 函数中加入这样的代码:

if ($(this).children().length > 0) {
var move = $(this).children().detach();
$(ui.draggable).parent().append(move);
}

这添加到整个代码中:

$("document").ready(function() {
$(".child").draggable({
revert: true
});
$(".parent").droppable({
accept: '.child',
drop: function(event, ui) {
if ($(this).children().length > 0) {
var move = $(this).children().detach();
$(ui.draggable).parent().append(move);
}

$(this).append($(ui.draggable));
}
});
});
.parent {
float: left;
margin-left: 5px;
height: 200px;
width: 200px;
border: 3px solid black
}
#child1 {
height: 50px;
width: 50px;
background-color: khaki;
}
#child2 {
height: 50px;
width: 50px;
background-color: aqua;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="parent">
<div class="child" id="child1"></div>
</div>
<div class="parent">
<div class="child" id="child2"></div>
</div>
<div class="parent">
</div>

关于jquery - 使用 jQuery 拖放交换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35541259/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com