Как перетаскивать сразу несколько элементов с помощью JavaScript или jQuery?

Ответ 1

Draggable в пользовательском интерфейсе jquery

все, что вам нужно сделать, это:

$(selector).draggable(); // and you are done!

см. пример здесь: http://jsfiddle.net/maniator/zVZFq/

Если вы действительно хотите использовать многократное перетаскивание, попробуйте использовать некоторые события щелчка, чтобы удерживать блоки на месте

$('.drag').draggable();

$('.drag').click(function(){
    console.log(this, 'clicked')
    var data = $(this).data('clicked');
    var all = $('.all');
    if(data == undefined || data == false){
        $(this).data('clicked', true);
        this.style.background = 'red';
        $(this).draggable('disable');
        if(all.children().length <= 0){
            all.draggable().css({
                top: '0px',
                left: '0px',
                width: $(window).width(),
                height: $(window).height(),
                'z-index': 1
            });
        }
        var top = parseInt(all.css('top').replace('px','')) +
                    parseInt($(this).css('top').replace('px',''))
        var left = parseInt(all.css('left').replace('px','')) +
                    parseInt($(this).css('left').replace('px',''))
        $(this).css({
            top: top,
            left: left
        })
        $('.all').append($(this));
    }
    else {
        $(this).data('clicked', false);
        this.style.background = 'grey';
        $(this).draggable('enable');
        $('body').append($(this));
        if(all.children() <= 0){
            all.draggable('destroy');
        }
        /*
        var top = parseInt(all.css('top').replace('px','')) -
                    parseInt($(this).css('top').replace('px',''))
        var left = parseInt(all.css('left').replace('px','')) -
                    parseInt($(this).css('left').replace('px',''))
        $(this).css({
            top: top,
            left: left
        })*/
    }
})

Смотрите пример здесь: http://jsfiddle.net/maniator/zVZFq/5

Ответ 2

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);
    })
}

Ответ 3

Я являюсь автором плагинов threedubmedia. Я добавил эту функциональность для поддержки нескольких элементов, потому что я не мог найти удовлетворительное решение где-либо еще.

Если вам нужно решение, которое работает с пользовательским интерфейсом jQuery, вот плагин, который добавляет некоторые функции мульти-перетаскивания, хотя в Firefox для Mac демоверсии работают некорректно.

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

Ответ 4

Это сработало для меня.

Заклинание здесь:

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 и зеленым для почти идеального решения.

Ответ 5

Проверьте это:

https://github.com/someshwara/MultiDraggable

Использование: $(".className").multiDraggable({ group: $(".className")});

Перетаскивает группу элементов вместе. Группа также может быть массивом, определяющим отдельные элементы.

Как $("#drag1").multiDraggable({ group: [$("#drag1"),$("#drag2") ]});

Ответ 6

Я хотел добавить (это поднимается высоко в google), поскольку ни один из плагинов в этом потоке не работал, и это не nativity, поддерживаемая jquery ui, простым элегантным решением.

Оберните перетаскиваемые элементы в контейнере и используйте событие, чтобы перетащить их все сразу, это позволяет перетаскивать синглы и многостраничные (но не очень выборочные перетаскивания).

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

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

Ответ 7

Поместите свои предметы в контейнер и сделайте этот контейнер перетаскиваемым. Вам нужно установить опцию handle как класс элемента вашего элемента. Также вам нужно будет пересчитать позицию позиции после перетаскивания. И, очевидно, когда вы снимаете выделение, вы должны взять их из этого контейнера и вернуть обратно в исходное положение.

Ответ 8

Это то, что я использовал, работал в моем случае.

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 });   
  }
});

};