0

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

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

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

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

drag : function (event,ui){

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

这仅在拖动停止时设置包含。

4

3 回答 3

4

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

由于仅在拖动开始时计算遏制，因此只需添加一行代码即可在拖动开始后遏制工作（除了已经给出的代码之外）：

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

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

于 2015-06-07T00:31:10.187 回答
2

您可以在 start:function(event,ui){} 中设置此事件，当您开始拖动时会触发此事件。

检查此链接。

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

于 2012-11-02T11:18:49.797 回答
0

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

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

这个小提琴是位置覆盖的一个例子：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; 
        });
});
于 2012-11-03T07:02:22.177 回答