如何在不同的Div之间使用jquery进行拖放
问题描述:
我想制作Drag&放下网站建设者。我正在使用脚本将图像从一个地方拖放到另一个地方。但他们放在其他之后。我需要脚本自由放置在我想要的地方。
我使用的脚本是
I want to make Drag & drop web builder. I am using the script to drag and drop the images from one place to another. but they are placing after then other. I need the script to freely place where ever I want.
The script I am using is ""
<script type="text/javascript"><br />
$(function () {<br />
$("#dvSource img").draggable({<br />
revert: "invalid",<br />
refreshPositions: true,<br />
drag: function (event, ui) {<br />
ui.helper.addClass("draggable");<br />
},<br />
stop: function (event, ui) {<br />
ui.helper.removeClass("draggable");<br />
var image = this.src.split("/")[this.src.split("/").length - 1];<br />
if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {<br />
<br />
}<br />
else {<br />
<br />
}<br />
}<br />
});<br />
$("#dvDest").droppable({<br />
drop: function (event, ui) {<br />
if ($("#dvDest img").length == 0) {<br />
$("#dvDest").html("");<br />
}<br />
ui.draggable.addClass("dropped");<br />
$("#dvDest").append(ui.draggable);<br />
}<br />
});<br />
});<br />
</script><br />
<br />
和
and
<br />
<pre lang="xml"><div id="dvSource"><br />
<img alt="" src="images/Chrysanthemum.jpg" /><br />
<img alt="" src="images/Desert.jpg" /><br />
<img alt="" src="images/Hydrangeas.jpg" /><br />
<img alt="" src="images/Jellyfish.jpg" /><br />
<img alt="" src="images/Koala.jpg" /><br />
<img alt="" src="images/Lighthouse.jpg" /><br />
<img alt="" src="images/Penguins.jpg" /><br />
<img alt="" src="images/Tulips.jpg" /><br />
</div><br />
<hr /><br />
<div id="dvDest"><br />
Drop here<br />
</div></pre><br />
<br />
<br />
答
(function(){< br />
(function () {<br />
(#dvSource img)。draggable({< br />
revert:invalid,< br />
refreshPositions:true,< br />
drag:function(event,ui){< br />
ui.helper.addClass(draggable);< br />
},< br />
stop:function(event,ui){< br />
ui.helper.remov eClass(draggable);< br />
var image = this.src.split(/)[this.src.split(/)。length - 1];< br / >
if(
("#dvSource img").draggable({<br /> revert: "invalid",<br /> refreshPositions: true,<br /> drag: function (event, ui) {<br /> ui.helper.addClass("draggable");<br /> },<br /> stop: function (event, ui) {<br /> ui.helper.removeClass("draggable");<br /> var image = this.src.split("/")[this.src.split("/").length - 1];<br /> if (
.ui.ddmanager.drop(ui.helper.data(draggable),event)){< br />
< ; br />
}< br />
else {< br />
< br />
}< br />
}< ; br />
});< br />
.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {<br /> <br /> }<br /> else {<br /> <br /> }<br /> }<br /> });<br />