web-dev-qa-db-ja.com

jQueryドラッグ可能+ドロップ可能：ドロップされた要素をドロップオンされた要素にスナップする方法

画面を2つのDIVsに分割しています。左側のDIVには50x50ピクセルのDIVsがいくつかあり、右側のDIVには80x80 LIsの空のグリッドがあります。左側のDIVsはドラッグ可能であり、LIにドロップすると、LIの中心にスナップします。

簡単そうですね。これをどうやってやるのか分からない。ドロップされたDIVのtopおよびleft CSSプロパティを、ドロップ先のLIのプロパティと一致するように操作してみましたが、leftおよびtopプロパティは、左側のDIVに関連しています。

ドロップされた要素をドロップ先の要素の中心にスナップさせるにはどうすればよいですか？それは簡単なことですよね？

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

編集2：この問題を抱えている他の人のために、これが私が修正した方法です：

ドラッグした要素を削除し、ドロップ可能なプラグインのdropコールバック内のドロップされた要素内に配置するキースのソリューションを使用しました。

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

ドロップされた要素を再びドラッグ可能にすることはしませんが、そうする場合は、ドラッグ可能に再度バインドします。

私にとって、この方法は、ドロップされた要素（左側のDIVを基準とする）を配置し、2番目のDIV内をスクロールするときに抱えていた問題も解決しました。 （要素はページ上で固定されたままで、今はスクロールします）。

ドラッグ中に見た目が良くなるようにスナップオプションを試しました。その提案をしてくれたkarim79に感謝します。

恐らくこれで恐ろしいコードの賞品を獲得することはないので、改善の余地がある場合は共有してください！

jquerydraggabledroppable
29
10goto10

同様の問題がありました-ドラッグした要素を古い親から手動で削除し、ドロップされた要素に追加することで回避しました。

16
Keith

キースの方法がうまくいったことがわかりました。彼の答えには実装例が含まれていないので、私は私の投稿をします。

$('.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);
    }
});
73
Barry Pitman

あなたの投稿をありがとう-それは正しい方向に私を助けた。 HTMLコードをいじるのではなく、ドラッグ可能なオブジェクトの位置プロパティを設定する方が少しわかりやすいと思います。これにより、位置がdroppableオブジェクトの左上隅に設定されますが、変更して中央に配置することもできます。

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

ドラッグを行うと、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');
});
3
AutomatedTester
$("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'});
                           }
                     }
                    );
3
diyism

左側のdivsが実際に右側のlisにあり（Firebugで確認できます）、lisがすべてul（あるべき）、次のいずれかまたは両方を試してください。

ul#right_div {
  text-align: center;
}

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

バリーのコードに基づいて、「x」ボタンのオプションを追加して、新しい親から再び切り離して初期に再接続する要素を追加したい場合はどうでしょうか？

私はこのように思ったが、うまくいかないようだった..初期状態を保持する何らかの変数を作成する

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は間違いなく間違っていますが、あなたがコンセプトを得ることができるかどうかわかりません...あなたが初期状態に落としたものを元に戻すことができるだけです。

0
nikolas