在其拖动功能中将包含选项添加到可拖动答案

【问题标题】：Adding containment option to draggable in its drag function在其拖动功能中将包含选项添加到可拖动
【发布时间】：2012-11-02 10:41:52
【问题描述】：

我有可拖动的 div("dragging") 和目标 div("dragto")。

我希望当“拖动” div 被拖动到足以位于“dragto” div 上方时，“拖动” div 的包含设置为“dragto”的 [x1,y1,x2,y2] " div，因此一旦进入该 div 就永远无法离开该 div。

在拖动结束之前和开始之后设置此包含，即在拖动功能期间，我可以检查“拖动”div 是否在“dragto”div 内。

有没有可能。如果我添加以下代码：

drag : function (event,ui){

   $("#dragging").draggable("option","containment",[x1,y1,x2,y2]);
   },

这仅在拖动停止时设置遏制。

【问题讨论】：

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

【解决方案1】：

我知道这是一个老问题，但我偶然发现了类似的问题，无法在 SO 上找到解决方案。最终，我想出了如何在拖动开始后将包含选项设置为可拖动（例如，在拖动元素时，突然满足了某些条件，因此您想在那时将包含添加到可拖动..）。

由于仅在拖动开始时计算包含，因此只需添加一行代码即可在拖动开始后进行包含（除了已经给出的代码）：

$("#dragging").draggable("option","containment",[x1,y1,x2,y2]);
$("#dragging").data('uiDraggable')._setContainment();

注意：如果在“拖动”功能中确实需要此功能，明智的做法是在此代码中添加一些条件以确保它只执行一次。由于每次在可拖动对象拖动时鼠标改变位置时都会调用“拖动”函数，因此一遍又一遍地设置包含没有意义......

【讨论】：

【解决方案2】：

你可以在 start:function(event,ui){} 里面设置，这个事件会在你开始拖拽的时候触发。

检查此链接。

http://jqfaq.com/category/widgets/autocomplete/

【讨论】：

【解决方案3】：

这不是现有功能，但您可以通过覆盖被拖动元素的位置来解决。

这里不是“准备就绪”的代码，而是允许开发自己的代码。想法是在可放置元素的悬停事件中设置包含位置变量，并在拖动元素的拖动事件中使用当前拖动位置对其进行测试。

这个小提琴是位置覆盖的一个例子：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; 
        });
});

【讨论】：