HTML

Question

HTML

<a id="go" href="javascript:void(0);">Start</a>

<div id="container">
    <div class="example" id="example1">1</div>
    <div class="example" id="example2">2</div>
    <div class="example" id="example3">3</div>
</div>

的jQuery

$('#go').click(function () {
    InitDragDrop();
});

function InitDragDrop() {
    var BoxImmagineFutura = null;

    $('#boxTemp').remove();
    BoxImmagineFutura = $('<div/>', { id: 'boxTemp', class: 'boxTempClass', text: 'Added' });
    BoxImmagineFutura.appendTo($("#container"));

    $('.example').mousedown(function (e) {
        BoxImmagineFutura.insertBefore("#example2");
        BoxImmagineFutura.show();
    });
}

CSS

.example, #boxTemp
{
    float:left;
    width:40px;
    height:40px;
    margin:10px;
    border:1px solid #000000;
    cursor:pointer;
}

#boxTemp
{
    background-color:red;
    display:none;
}

按顺序：

单击“开始”以初始化函数/处理程序;
点击一个div（当你按下鼠标时，你会显示添加的框）;
再次单击“开始”以重置所有变量;
再次点击div：为什么有两个添加的div？我已使用$('#boxTemp').remove();

你能帮我解决这个问题吗？如果我删除BoxImmagineFutura.insertBefore("#example2");，则该div没有“克隆”。

第一次编辑：

是的，每当我调用InitDragDrop（）时，我也应该解除绑定mousedown()，但这并不能解释我的问题

Answer 1

将var BoxImmagineFutura = null;拉出您的功能。此外，您不需要BoxImmagineFutura.appendTo($("#container")); insertBefore处理将其插入DOM。

<强> jsFiddle example

Answer 2

你只是在鼠标悬停时隐藏BoxImmagineFutura而不是删除。如果你仔细看，$（'＃boxTemp'）。remove（）;单击“开始”时，只会调用一次。并且在第一个实例'#boxTemp'不存在所以$（'＃boxTemp'）。remove（）;什么都不做接下来，当您在“.example”上进行mousedown时，它将简单地在“＃example2”之前插入另一个div，当您“mouseup”时，您只是隐藏此div。

如果你只是移动$（'＃boxTemp'），那就取代它.remove（）;在“mouseup”事件中，您的问题将得到解决。

此外，您没有为克隆做任何事情。这意味着，一旦你使用了BoxImmagineFutura，它就消失了。

似乎某些对象引用保留在内存中？

HTML

的jQuery

CSS

第一次编辑：

2 个答案: