jQuery UI Draggable:在拖动事件上更新包含 [英] jQuery UI Draggable: Update containment on drag event

问题描述

这是否可能:创建一个可拖动元素，以便将其拖动到特定的可放置元素上时，将可拖动元素的包含选项设置为可放置元素?这样会产生一种效果，即在可放置元素上拖动某些东西会导致可拖动元素被锁定/卡在可放置元素的范围内.

Is this possible: Create a draggable element so that when it is dragged over a specific droppable element, the draggable element's containment option is set to the droppable element? This would create an effect where dragging something over a droppable element causes the draggable element to get locked/stuck to the confines of the droppable element.

下面是我的代码的摘录，尽管它无法实现上述效果.

Below is an excerpt from my code, although it fails to accomplish the above effect.

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

推荐答案

您可以覆盖要拖动的元素的位置.

You could overwrite the position of the element being dragged.

这里不是代码"ready go"，而是一些允许自己发展的代码.想法是在可放置元素的hover事件中设置遏制位置变量，并在拖动元素的drag事件中使用当前拖动位置对其进行测试.

Here is not the code "ready to go" but pieces permitting to develop yourself. The idea is to set containment positions variables in the hover event of your droppable element and test them with the current dragging position in the drag event of your dragging element.

此小提琴是位置覆盖的示例: http://jsfiddle.net/QvRjL/74/

This fiddle is an example of the position overriding : http://jsfiddle.net/QvRjL/74/

此小提琴是如何检查所拖动元素是否在容器边框附近的示例: http://jsfiddle.net/pPn3v/22/

This fiddle is an example of how you could do to check if the dragged element is near a border of your container : 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; 
        });
});

这篇关于jQuery UI Draggable:在拖动事件上更新包含的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！