jQuery draggable + droppable：ドロップした要素をドロップした要素にスナップする方法

Question

私は画面を2つのDIVに分割しました。左にDIV私はいくつかの50x50ピクセルDIVを持って、右にDIV私は80x80 LI秒の空のグリッドを持っている。左側のDIVはドラッグ可能で、LIに落とした後は、それらの中心にスナップする必要があります。LI

音はシンプルですね。私はちょうどこれを行う方法を知らない。 DIVのtopとleftのCSSプロパティは、ドロップされたLIのプロパティと一致するように操作しましたが、leftとtopのプロパティは、左側のDIVに相対的です。

ドロップされた要素のスナップを、ドロップされた要素の中心にするにはどうすればよいですか？それは簡単だよ、そう？

編集： jQuery 1.3.2でjQuery UI 1.7.2を使用しています。

編集2：この問題を持っている他の誰のために、これは私がそれを固定する方法である：

を私はドラッグされた要素を削除するとのdropコールバックで落とし、上の要素の中にそれを置くのキースのソリューションを使用ドロップ可能なプラグイン：

function gallerySnap(droppedOn, droppedElement) 
{ 
    $(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>'); 
    $(droppedElement).remove(); 
} 

私はドロップ要素が再びドラッグ可能、しかし、あなたがしなければ、もう一度それをドラッグ可能に結合することはありません。

私にとってこの方法は、ドロップされた要素（左のDIVに相対する）を配置し、2番目のDIVの内部をスクロールするときに問題を解決しました。 （要素はページ上に固定されたままになり、今度はスクロールします）。

私はドラッグ中に見栄えを良くするためにスナップオプションで遊んだので、その提案のkarim79に感謝します。

恐ろしいコード賞を獲得できませんので、改善の余地がある場合は共有してください！

Answer 1

所定の位置にはめ込みために使用されるコードのサンプルがある - 私は手動でその古い親からドラッグされた要素を削除し、要素上でドロップにそれを追加することによって、その周りに働きました。

Answer 2

左のdiv sが（あなたがFirebugのを確認することができます）右のli Sに実際にある、とli sがすべてul（本来あるべきもの）である場合、いずれか、または両方をしようとした場合

ul#right_div { 
    text-align: center; 
} 

ul#right_div li { 
    text-align: center; 
} 

Answer 3

私はあなたがドラッグ操作を行う際に、jQueryのUIは、あなたがそれを落としたどこに伝えるためにインラインを追加していることが見つかりました：。次の以下は、私は同様の問題があった

$('.droppable').droppable({ drop: function(ev, ui) { 
    //Get Details of dragged and dropped 
    var draggedclass = ui.draggable.attr('class'), 
     droppedclass = 'class' + $(this).attr('name').toLowerCase(); 

    //update the classes so that it looks od.  
    ui.draggable.removeClass(draggedclass).addClass(droppedclass); 
    ui.draggable.removeAttr('style'); 
}); 

Answer 4

あなたのポストに感謝します。それは正しい方向に私を助けました。ドラッグ可能なオブジェクトの位置プロパティを設定するのは、HTMLコードを使いこなすのではなく、ちょっときれいです。これにより、位置がオブジェクトdroppableの左上隅に設定されますが、中央に配置するように変更することもできます。

drop: function(event, ui) { 
    $(ui.draggable).css('top', $(this).position().top); 
    $(ui.draggable).css('left', $(this).position().left); 
} 

Answer 5

$("form li").draggable({snap:'.ui-droppable', snapMode:'inner', revert:true}); 
$('.drop').droppable({drop:function(ev, ui) 
          {$(ui.draggable).appendTo($(this)) 
              .css({position:'static', left:'0px', top:'0px'}) 
              .draggable('option', 'disabled', false) 
              .css({position:'relative'}); 
          } 
        } 
        ); 

Answer 6

私はキースの方法は、私のために働いたことがわかりました。もう少し簡潔に、

$('.dropTarget').droppable({ 
    drop: function(ev, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 
    } 
}); 

か：：彼の答えは、実装例が含まれていないので、私は私を投稿します

$('.dropTarget').droppable({ 
    drop: function(ev, ui) { 
     $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this); 
    } 
}); 

Answer 7

をバリーのコードに基づいて、我々は追加する何が好きdの場合オプションを "x"ボタンで使用すると、新しい親から再度切り離され、最初に再結合される要素がありますか？

は、私はこのようなSTHを思ったが、初期状態を保持する変数のいくつかの並べ替えをするために... を動作していないようでした

var flag; 
$('.draggable-div').draggable({ 
    revert: 'invalid', 
    stop: function(){ 
     $(this).draggable('option','revert','invalid'); 
     $(this).find('.undo').show(); 
    flag=$(this).parent(); 
    } 
}); 


$('.draggable-div').find('.undo').click(function(i, e) { 
    var $div = $(this).parent(); 
$($div).detach().appendTo(flag); 
} 

STHは間違いなく間違っているが、私はあなたかどうかを知りませんコンセプトを得ることができます... あなたが初期状態に落としたものを元に戻すことができます。