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をもう一度クリックするより：なぜ2つの追加divがあるのですか？前のものを削除しました$('#boxTemp').remove();

この問題を解決するのを手伝ってもらえますか？削除するBoxImmagineFutura.insertBefore("#example2");と、そのdivの「クローン」はありません。

最初の編集：

ええ、InitDragDrop（）を呼び出すたびに、バインドを解除する必要がありmousedown()ますが、これは私の問題を説明していません

4

2 に答える 2

1

あなたの機能からあなたをvar BoxImmagineFutura = null;引き出します。BoxImmagineFutura.appendTo($("#container"));また、ハンドルとしてinsertBeforeDOMに挿入する必要はありません。

jsFiddleの例

于 2012-09-18T15:52:35.590 に答える
0

マウスオーバーでBoxImmagineFuturaを非表示にしているだけで、削除されていません。注意深く見ると、$（'＃boxTemp'）。remove（）; [開始]をクリックすると、1回だけ呼び出されます。そして、最初は'#boxTemp'は存在しないので、$（'＃boxTemp'）。remove（）; 何もしません。次に、「。example」をマウスダウンすると、「＃example2」の前に別のdivが挿入され、「mouseup」を実行すると、このdivが非表示になります。

その代わりに、単に$（'＃boxTemp'）。remove（）;を移動した場合。「マウスアップ」イベントでは、問題は解決されます。

また、クローン作成のために何もしていません。つまり、BoxImmagineFuturaを使用すると、それはなくなります。

于 2012-09-18T15:47:08.423 に答える