web-dev-qa-db-ja.com

JavaScriptまたはjQueryで複数の要素を一度にドラッグするにはどうすればよいですか？

Windowsデスクトップで複数のアイコンを選択してドラッグした場合のように、jQueryを使用して要素のグループをドラッグできるようにしたい。

threedubmediaのjQuery.event.dragのデモを見つけました。

http://threedubmedia.com/code/event/drag/demo/multi
http://threedubmedia.com/code/event/drag#demos

このプラグインは素晴らしいと思います。これは良い人気のあるライブラリですか？それを使用するWebサイトまたはアプリケーションを知っていますか？

複数のオブジェクトをドラッグする他のライブラリまたはプラグインはありますか？

jQuery UIは複数のオブジェクトをドラッグできますか？

javascriptjqueryjquery-uijquery-pluginsdrag-and-drop
23
js_
var selectedObjs;
var draggableOptions = {
    start: function(event, ui) {
        //get all selected...
        selectedObjs = $('div.selected').filter('[id!='+$(this).attr('id')+']');
    },
    drag: function(event, ui) {
        var currentLoc = $(this).position();
        var orig = ui.originalPosition;

        var offsetLeft = currentLoc.left-orig.left;
        var offsetTop = currentLoc.top-orig.top;

        moveSelected(offsetLeft, offsetTop);
    }       
};

$(document).ready(function() {
    $('#dragOne, #dragTwo').draggable(draggableOptions);
});

function moveSelected(ol, ot){
    console.log(selectedObjs.length);
    selectedObjs.each(function(){
        $this =$(this);
        var pos = $this.position();

        var l = $this.context.clientLeft;
        var t = $this.context.clientTop;

        $this.css('left', l+ol);
        $this.css('top', t+ot);
    })
}
9
ChrisThompson

私はthreedubmediaプラグインの著者です。他のどこにも満足のいく解決策が見つからなかったため、複数の要素をサポートするためにこの機能を追加しました。

JQuery UIで動作するソリューションが必要な場合は、いくつかのマルチドラッグ機能を追加するプラグインがありますが、デモはMac版Firefoxでは正しく動作しないようです。

http://www.myphpetc.com/2009/11/jquery-ui-multiple-draggable-plugin.html

8
mike.helgeson

これは私のために働いた。

ここで中段：

var selectedObjs;
var draggableOptions = {
start: function(event, ui) {
    //get all selected...
    if (ui.helper.hasClass('selected')) selectedObjs = $('div.selected');
    else {
        selectedObjs = $(ui.helper);
        $('div.selected').removeClass('selected')
    }
},
drag: function(event, ui) {
    var currentLoc = $(this).position();
    var prevLoc = $(this).data('prevLoc');
    if (!prevLoc) {
        prevLoc = ui.originalPosition;
    }

    var offsetLeft = currentLoc.left-prevLoc.left;
    var offsetTop = currentLoc.top-prevLoc.top;

    moveSelected(offsetLeft, offsetTop);
    selectedObjs.each(function () {
           $(this).removeData('prevLoc');
        });
    $(this).data('prevLoc', currentLoc);
}
};

$('.drag').draggable(draggableOptions).click(function()     {$(this).toggleClass('selected')});


function moveSelected(ol, ot){
console.log("moving to: " + ol + ":" + ot);
selectedObjs.each(function(){
    $this =$(this);
    var p = $this.position();
    var l = p.left;
    var t = p.top;
    console.log({id: $this.attr('id'), l: l, t: t});


    $this.css('left', l+ol);
    $this.css('top', t+ot);
})
}

ほぼ完璧なソリューションを提供してくれたChrisThompsonとgreenに感謝します。

3
Riccardo Di Stefano

これをチェックしてください：

https://github.com/someshwara/MultiDraggable

使用法：$(".className").multiDraggable({ group: $(".className")});

要素のグループを一緒にドラッグします。グループは、個々の要素を指定する配列にすることもできます。

いいね：$("#drag1").multiDraggable({ group: [$("#drag1"),$("#drag2") ]});

1
Sudheer Someshwara

このスレッドのプラグインはどれも機能せず、シンプルでエレガントなソリューションであるjquery uiによってサポートされているキリスト降誕ではないので、追加したかったです（これはGoogleで高くなります）。

ドラッグ可能な要素をコンテナにラップし、イベントを使用してそれらを一度にドラッグします。これにより、単一のドラッグ可能な要素とマルチドラッグ可能な要素が可能になります（実際には選択可能なドラッグ可能要素ではありません）。

jQuery(document).click(function(e) {

  if(e.shiftKey) {
      jQuery('#parent-container').draggable();
  }
});
1
Wyck

これは私が使用したもので、私の場合は働いていました。

function selectable(){
$('#selectable').selectable({
  stop: function() {
    $('.ui-selectee', this).each(function(){
        if ($('.ui-selectee').parent().is( 'div' ) ) {
            $('.ui-selectee li').unwrap('<div />');
        }


    });

    $('.ui-selected').wrapAll('<div class=\"draggable\" />');

    $('.draggable').draggable({ revert : true });   
  }
});

};

0
Sjoerd de Wit

アイテムをコンテナに入れて、このコンテナをドラッグ可能にします。 handleオプションをitem要素のクラスに設定する必要があります。また、ドラッグ後にアイテムの位置を再計算する必要があります。そして明らかに、アイテムの選択を解除するときは、このコンテナからアイテムを取り出して元に戻す必要があります。

0
Ev_genus