Question

我有可拖动的div（“拖动”）和目标div（“拖动”）。

我希望当拖动“拖动”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]);
   },

仅在拖动停止后设置包含。

Answer 1

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

由于仅在拖动开始时计算包含，因此在开始拖动之后，只有一行代码必须添加以便包含才能工作（除了已经提供的代码之外）：

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

注意：如果确实需要此功能，请拖动＆＃39;函数，为这段代码添加一些条件以确保它只执行一次是明智的。因为＆＃39;拖动＆＃39;每次鼠标在拖动拖动时改变位置时都会调用函数，反复设置包含没有任何意义......

Answer 2

你可以在start：function（event，ui）{}里面设置这个，当你开始拖动时会触发这个事件。

检查此链接。

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

Answer 3

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

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

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

在其拖动功能中为可拖动添加包含选项

3 个答案: