2012-01-24 8 views
0

私は左の写真をたくさん持っていて、それらを右のスロットにドラッグしたいのですが、右のスロットに画像をドラッグすると、左の画像が消えます。jQuery UIのドラッグ可能なヘルパーの問題?

ドラッグ可能な機能にhelper: 'clone'を追加しましたが、まだ削除しています。私はui.draggable.cssの位置を使用して、スロットのドラッグされた要素のオンタップを配置しています。私はそれが問題かもしれないと思うが、私はそれを修正する方法については不明ですか?

オブジェクトをドラッグする前にクローンを作成し、ドラッグしたアイテムスナップをドロップ可能な場所に挿入する方法はありますか? .cssを使用せずに、手動でスロットのドラッグ可能なアイテムの上端を移動する必要はありません。

+0

ドラッグした要素を自分で配置するのではなく、 'snap'と' snapMode' [options](http://jqueryui.com/demos/draggable/#options)を試しましたか? –

答えて

1

あなたが求めていることを達成する最も簡単な方法は、それをドロップ可能なクラスと組み合わせることです。私もあなたのためjsfiddle(http://jsfiddle.net/fordlover49/deb9W/)を加え

<img class="draggable" src="http://jsfiddle.net/img/keys.png"> 
<img class="draggable" src="http://jsfiddle.net/img/logo.png"> 
<img class="draggable" src="http://jsfiddle.net/img/info-close.png"> 

<div id="dropzone" class="dropzone" style=""></div> 


$(function() { 
    $(".draggable").draggable({ 
     helper: "clone", 
     grid: [ 20,20 ] 
    }); 
    $("#dropzone").droppable({ 
     drop: function(event, ui) { 
      $this.append(ui.draggable); 
     } 
    }); 
}); 

:ここではどのような私が参照してるのは非常に基本的な考え方です。

関連する問題