31

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

シンプルですね。私はこれを成し遂げる方法を知りません。ドロップされたとCSS プロパティを操作して、それらDIVがドロップされたものと一致するようにしましたが、とプロパティは left に対して相対的です。topleftLIlefttopDIV

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

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

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

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

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

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

私にとって、この方法は、ドロップされた要素を配置するときに発生した問題も解決しました (これは left に対して相対的ですDIV) DIV。(要素はページ上で固定されたままになりますが、スクロールするようになりました)。

ドラッグ中に見栄えを良くするためにスナップオプションをいじったので、その提案についてkarim79に感謝します。

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

4

7 に答える 7

75

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

$('.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);
    }
});
于 2011-05-14T17:50:02.277 に答える
16

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

于 2009-08-10T12:55:07.643 に答える
11

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

drop: function(event, ui) {
   $(ui.draggable).css('top', $(this).position().top);
   $(ui.draggable).css('left', $(this).position().left);
}
于 2010-03-28T03:50:03.093 に答える
3 
$("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'});
                           }
                     }
                    );
于 2010-12-20T08:16:02.063 に答える
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');
});
于 2009-08-10T12:53:44.617 に答える
0

Barry のコードに基づいて、「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 は間違いなく間違っていますが、概念を理解できるかどうかはわかりません...初期状態に落としたものを元に戻すことができるだけです。

于 2013-04-04T14:41:13.487 に答える
0

div左側の が実際にli右側の にある場合 (Firebug で確認できます)、および がすべて a にある場合(liあるulべき姿)、次のいずれかまたは両方を試してください。

ul#right_div {
  text-align: center;
}

ul#right_div li {
  text-align: center;
}
于 2009-08-10T12:52:29.063 に答える