1

这是我第一次尝试通过克隆元素进行拖放。通过阅读文章并浏览本网站上发布的示例和其他问题，我已经走到了这一步。但是我没有想到的一件事是图像的克隆。一旦我将图像放入新的 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>

谢谢！

4

0 回答 0