使用JQueryUi可拖动的选定HTML DIV元素可拖动

Question

我有一个jQuery对象的数组，这些对象是draggable。
我想要的是当数组中的任何元素被拖动时，所有其他元素也应该被拖动。

以下是我已经尝试样本代码，但我没有得到任何成功

$(event.target).parents('.ui-class-name').draggable({ 
    disabled : false, 
    helper: function() { 
    var allSelectedEle = $($selected).map(function() { 
     return this.toArray() 
    }); 
    return allSelectedEle; 
} 
}); 

这里$selected是jQuery对象

更新的数组：这里是sample标记

Answer 1

您需要保存元素的初始坐标，并在拖动时更新它们（demo）：

var els = $('.eq-ui-widget') 
var coords = { x: 0, y: 0 } 

function getSelected() { 
    return els.filter('.selected') 
} 

els 
.draggable({ 
    disbled: true, 
    drag: function(e, ui) { 
     getSelected().each(function() { 
      var orig = $(this).data().orig 
      $(this).css({ 
       top: orig.top + (ui.position.top - coords.y) , 
       left: orig.left + (ui.position.left - coords.x) 
      }) 
     }); 
    }, 
    start: function(e, ui) { 
     coords.x = ui.position.left; 
     coords.y = ui.position.top; 

     getSelected().each(function() { 
      $(this).data().orig = $(this).position(); 
     }); 
    } 
}) 
.on('click', function(event) { 
    if(!event.ctrlKey) return; 
    $(event.target).toggleClass('selected'); 
    /*logic for dragging all selected elements simultaneously*/ 

    var selected = getSelected() 
    els.draggable('option', 'disabled', true) 
    selected.draggable('option', 'disabled', false) 
});