jQuery UI Draggable：更新包含拖動事件

Question

這是可能的：創建一個可拖動的元素，以便當它拖動到特定的可拖動元素時，可拖動元素的包含選項設置爲可拖動元素？這會在將某個元素拖放到可拖動元素上時導致可拖動元素被鎖定/卡住到可拖動元素的限制內。

下面是我的代碼摘錄，雖然它未能實現上述效果。

var droppable_position = $('#droppable').position(); 
$('#draggable').draggable({ 
    helper: 'clone', 
    drag: function (event, ui) { 
     if (ui.position.left > droppable_position.left && ui.position.top > droppable_position.top) 
     { 
      $('#draggable').draggable('option', 'containment', '#droppable'); 
     } 
    } 
}); 

Answer 1

您可以覆蓋被拖動元素的位置。

這裏不是代碼「準備好」，而是允許自己發展的代碼。我們的想法是在您的droppable元素的hover事件中設置包容位置變量，並使用拖動元素的drag事件中的當前拖動位置對它們進行測試。

這小提琴是位置壓倒一切的例子：http://jsfiddle.net/QvRjL/74/

這小提琴是你如何可以做檢查，如果拖動的元素是靠近你的容器的邊界的例子：http://jsfiddle.net/pPn3v/22/

位置覆蓋例如：

$(document).mousemove(function(e){ 
    window.mouseXPos = e.pageX; 
    window.mouseYPos = e.pageY; 
}); 

$('[id^="drag-"]').each(function() { 
    $(this).draggable({ 
     opacity: 0.7, 
     cursorAt: { top: 15, left: 50 },   
     scroll: true, 
     stop: function(){}, 
     drag : function(e,ui){    
      //Force the helper position 
      ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left; 
      ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top; 
     }); 
});