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