0

代码：

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;
}
​

为了 ：

  1. 点击开始初始化函数/处理程序；
  2. 单击一个 div（当您按下鼠标时，您将显示已添加框）；
  3. 再次点击开始重置所有变量；
  4. 比再次单击一个 div ：为什么有两个已添加的 div？我已经删除了前一个$('#boxTemp').remove();

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

第一次编辑：

是的，每次我调用 InitDragDrop() 我也应该 unbind mousedown()，但这并不能解释我的问题

4

2 回答 2

1

把你从你的职能中拉var BoxImmagineFutura = null;出来。此外，您不需要将其BoxImmagineFutura.appendTo($("#container"));作为insertBefore句柄插入 DOM。

jsFiddle 示例

于 2012-09-18T15:52:35.590 回答
0

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

如果你只是移动 $('#boxTemp').remove(); 而不是那样 在“mouseup”事件中，您的问题将得到解决。

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

于 2012-09-18T15:47:08.423 回答