jQuery UI Draggable：更新拖动事件的包含答案

【问题标题】：jQuery UI Draggable: Update containment on drag eventjQuery UI Draggable：更新拖动事件的包含
【发布时间】：2012-10-27 19:19:52
【问题描述】：

这可能吗：创建一个可拖动元素，以便当它被拖动到特定的可放置元素上时，可拖动元素的包含选项设置为可放置元素？这会产生一种效果，在可放置元素上拖动某些东西会导致可拖动元素被锁定/卡在可放置元素的范围内。

下面是我的代码的摘录，虽然没有达到上面的效果。

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

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

您可以覆盖被拖动元素的位置。

这里不是“准备就绪”的代码，而是允许开发自己的代码。想法是在可放置元素的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; 
        });
});

【讨论】：