如何使用jquery在不同的Div之间拖放

How to drag and drop using jquery between different Div

本文关键字：Div 之间 拖放 何使用 jquery      更新时间：2023-09-26

我想制作拖放式Web构建器。我正在使用脚本将图像从一个地方拖放到另一个地方。但他们正在放置然后其他。我需要脚本可以自由地放置在我想要的任何位置。我正在使用的脚本是"

<script type="text/javascript">
$(function () {
$("#dvSource img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function (event, ui) {
ui.helper.addClass("draggable");
},
stop: function (event, ui) {
ui.helper.removeClass("draggable");
var image = this.src.split("/")[this.src.split("/").length - 1];
if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
}
else {
}
}
});
$("#dvDest").droppable({
drop: function (event, ui) {
if ($("#dvDest img").length == 0) {
$("#dvDest").html("");
}
ui.draggable.addClass("dropped");
$("#dvDest").append(ui.draggable);
}
});
});
</script>

and 

<pre lang="xml"><div id="dvSource">
<img alt="" src="images/Chrysanthemum.jpg" />
<img alt="" src="images/Desert.jpg" />
<img alt="" src="images/Hydrangeas.jpg" />
<img alt="" src="images/Jellyfish.jpg" />
<img alt="" src="images/Koala.jpg" />
<img alt="" src="images/Lighthouse.jpg" />
<img alt="" src="images/Penguins.jpg" />
<img alt="" src="images/Tulips.jpg" />
</div>
<hr />
<div id="dvDest">
Drop here
</div></pre>

为您的身体标签分配一个 id，例如 

<body id="bdy">

使用正文 ID 更改可放置代码，请参阅下文

$("#bdy").droppable({
        drop: function (event, ui) {
            if ($("#bdy img").length == 0) {
                $("#bdy").html("");
            }
            ui.draggable.addClass("dropped");
            $("#bdy").append(ui.draggable);
        }
    });
相关文章：