ドラッグ可能でドロップ可能な動的ポスティング

Question

jQuery UIを使用してパズルを構築しようとしています。私はそれをposisionするパズル、#splinterとコンテナ#vaseの部分を持っている：

<div id="vase"> 
    <div id="target"></div> 
</div> 
<div class="splinter splinter-1" data-target-x="53" data-target-y="90"> 
    <img src="splinter-1.png" /> 
</div> 

私はドロップ可能の位置を設定するために部品のデータ属性を使用します。これは機能しますが、スナップ領域は再計算されません。部品は元の位置にスナップします。

$('.splinter').draggable({ 
revert: 'invalid', 
snap: '#target', 
snapMode: 'inner', 
start: function (event, ui){ 
    var $target = $('#target'); 
    $('#vase').append($target); 
    $this = $(this); 
    $('#target').droppable('destroy').droppable({ 
     accept: '.splinter' 
    }); 
    $target.css({ 
     width: $this.width(), 
     height: $this.height(), 
     left: parseInt($this.attr('data-target-x')), 
     top: parseInt($this.attr('data-target-y')) 
    }); 
    $this.draggable('option', 'snap', '#target'); 
}, 
stop: function (event, ui){ 
    $this = $(this); 
    $this.draggable('destroy'); 
} 
}); 

編集：私は要素をドラッグしてから、再度スナップのdivにドラッグし、それをそれを解放すると、それが動作することが判明

。もちろん、私はそのための復帰オプションを無効にする必要があります。誰もこの行動を前に消したのですか？

おかげであなたはおそらくrefreshPositions使用する必要が

ルーカス

Answer 1

：真を。パフォーマンスには恐ろしいものがありますので、ドロップ/移動するたびに設定してリセットすることをお勧めします。

$('.splinter').draggable({refreshPositions:true,...}); 

もう1つの問題は、ある時点で多くのパズルピースがあると思います。 jQueryのドラッグ＆ドロップではこれをうまく処理できません。ドラッグ＆ドロップでイベントデリゲーションを使用できるようにするプラグインのいくつかを調べることができます。

あなたはクリック上の位置（または他のイベント）を設定することにより、このより良いを行うことができるかもしれません：

$('.splinter').click(function(){...set css position...}).draggable(...); 

これは、位置が「開始」の前に計算されているすべての問題を解決するだろうが、と呼ばれていますあなたがドロップ可能なターゲットの位置を変更する場所です。

Answer 2

問題は、コールバック関数がどの順番で実行されたかにあります。スナップ要素の位置が計算された後、 "start"コールバック関数が呼び出されます。このコールバックで#target divの位置を変更しました。

$('.splinter').mousedown(function(){ 
    var $target = $('#target'); 
    //$('#vase').append($target); 
    $this = $(this); 
    $target.css({ 
     width: $this.width(), 
     height: $this.height(), 
     marginLeft: parseInt($this.attr('data-target-x')), 
     marginTop: parseInt($this.attr('data-target-y')) 
    }); 
}); 

の代わりに、私はクリックイベントドラッグ使用の前にトリガされているマウスダウンイベントにバインドするコールバック関数：これは私がこの問題を解決する方法です。