如何在不同的Div之间使用jquery进行拖放 [英] How to drag and drop using jquery between different Div

问题描述

我想制作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 />

这篇关于如何在不同的Div之间使用jquery进行拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！