Question

这是我第一次尝试通过克隆元素来拖放。通过阅读文章并浏览本网站上发布的示例和其他问题，我已经做到了这一点。但有一件事让我想到的是克隆图像。一旦我将图像放入新的div中，它就会克隆并仍然可以移动。但是在我移动克隆之后，它继续克隆新图像，在新Div中留下现有的图像。我搜索并尝试了很多有类似问题的帖子，什么都不做。我相信在克隆之后，它仍然与现有的Div ??

相关联

这是我的代码：

<script>
    var copy = 0;
    $(function () {
        $("#iWidget").accordion();
        $("#iWidget img").draggable({
            cursor: 'move',
            revert: 'invalid',
            appendTo: "body",
            helper: "clone"
        });
        $("#iBoard img").draggable();
        $("#iBoard").droppable({
            drop: function (event, ui) {
                copy++
                var TemEle = $(ui.helper).clone().attr("id", $(this).attr('id') + copy);
                $(this).append(TemEle)
                TemEle.draggable();
                alert('drop id:' + TemEle.attr('id'));
            }
        });
    });


<div class="iPage">
<div id="iBoard">
</div>

<div id="iWidget">
    <h1>Network</h1>
    <div>
        <asp:Image ImageUrl="Images/Network/WRouterONLINE.gif" ID="WRouterONLINE" runat="server"  Height="30px" Width="30px" />
        <asp:Image ImageUrl="Images/Network/ModemONLINE.gif" ID="ModemONLINE" runat="server"  Height="30px" Width="30px" />
    </div>
    <h1>Servers</h1>
    <div>
        <asp:Image ImageUrl="Images/Server/ServerONLINE.gif" ID="ServerONLINE" runat="server"  Height="30px" Width="30px" />
    </div>
    <h1>Workstations</h1>
    <div>
        <asp:Image ImageUrl="Images/Workstations/AlienwareONLINE.gif" ID="AlienwareONLINE" runat="server"  Height="30px" Width="20px" />
        <asp:Image ImageUrl="Images/Workstations/PCONLINE.gif" ID="PCONLINE" runat="server"  Height="30px" Width="30px" />
    </div>
    <h1>Other</h1>
    <div>
        <asp:Image ImageUrl="Images/Other/PS3ONLINE.gif" ID="PS3ONLINE" runat="server"  Height="30px" Width="30px" />
        <asp:Image ImageUrl="Images/Other/BlueRayONLINE.gif" ID="BlueRayONLINE" runat="server"  Height="30px" Width="30px" />
        <asp:Image ImageUrl="Images/Other/TabletONLINE.gif" ID="TabletONLINE" runat="server"  Height="30px" Width="30px" />
    </div>
</div>

谢谢！

拖放，克隆，可拖动，在新div中拖动后继续克隆

0 个答案: