检测可拖动元素是否悬停在另一个元素上。

4
我有几个div在页面中分散出现:
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

这些都可以使用jQueryUI进行拖动:

var $divs = $('#one, #two, #three');
$divs.draggable({ start: dragStart,
                  cursor: 'move',     
                  stop: dragStop,
                  drag: whileDrag });

我希望能够在当前拖动的元素拖动到其中一个 div 上时触发事件。但不像 jQueryUI 的 droppable 那样需要停止拖动才能触发。它应该在拖动过程中触发!除了实时读取偏移量之外,是否有其他方法?非常感谢任何帮助!谢谢。
1个回答

3

测试jsFiddle

// function to determine, that rectangles intersect
var intersect = function(a,b){
    return(
            (
              (
                ( a.x >= b.x && a.x <= b.x1 ) || ( a.x1 >= b.x && a.x1 <= b.x1  )
              ) && (
                ( a.y >= b.y && a.y <= b.y1 ) || ( a.y1 >= b.y && a.y1 <= b.y1 )
              )
            ) || (
                   (
                     ( b.x >= a.x && b.x <= a.x1 ) || ( b.x1 >= a.x && b.x1 <= a.x1  )
                   ) && (
                     ( b.y >= a.y && b.y <= a.y1 ) || ( b.y1 >= a.y && b.y1 <= a.y1 )
                   )
                 )
            ) || (
                  (
                    (
                      ( a.x >= b.x && a.x <= b.x1 ) || ( a.x1 >= b.x && a.x1 <= b.x1  )
                    ) && (
                      ( b.y >= a.y && b.y <= a.y1 ) || ( b.y1 >= a.y && b.y1 <= a.y1 )
                    )
            ) || (
                  (
                   ( b.x >= a.x && b.x <= a.x1 ) || ( b.x1 >= a.x && b.x1 <= a.x1  )
                  ) && (
                   ( a.y >= b.y && a.y <= b.y1 ) || ( a.y1 >= b.y && a.y1 <= b.y1 )
                  )
               )
            );
}

// elements - elements to fire dragover event on draggable element hover 
var coordinates = {},
    elements = ['#two', '#three'];
    $('#one').draggable({
        start: dragStart,
        cursor: 'move',
        stop: dragStop,
        create: function(event, ui){
            for (var k in elements){
                coordinates[k] = {
                    x: $(elements[k]).offset().left,
                    y: $(elements[k]).offset().top,
                    x1: $(elements[k]).offset().left + $(elements[k])[0].clientWidth,
                    y1: $(elements[k]).offset().top + $(elements[k])[0].clientHeight
                }
            }
        },
        drag: function(event, ui){
            var draggableElementCoord = {
                x: ui.offset.left,
                y: ui.offset.top,
                x1: ui.offset.left + ui.helper[0].clientWidth,
                y1: ui.offset.top + ui.helper[0].clientHeight
            };
            for (var k in elements){
                if (intersect(coordinates[k], draggableElementCoord)){
                    $(elements[k]).trigger('dragover');
                }
            }
        }
    });

使用:

$(document).on('dragover', '#two', function(e){
  // your code
});

首先感谢您的回答。在我提出这个问题之前,我考虑过使用offset()的方法,就像您之前所说的那样,但我认为可能有更简单的方法。至于您的第二个结论,它并不起作用。实际上,我不知道您所说的dragover是什么。我在JqueryUI的文档中没有找到任何相关信息?您能否解释一下,或许会有所帮助! - supersize
dragover - 标准的JS事件,当拖动的元素悬停在更多的元素上时触发。但是显然插件没有触发此事件。 - maximkou
我可以帮你处理第一个变量。 - maximkou
我添加了完整的第一次实现变体。 - maximkou
哇,谢谢你!不幸的是我现在无法再检查它了,但我会在几个小时内测试!很高兴你能帮忙! - supersize
显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接