检测拖动对象下方的多个元素? JavaScript/Jquery

发布于 2024-10-19 13:19:10 字数 821 浏览 1 评论 0原文

我有一个按钮,可以动态创建一个对象,并使用jquery使用以下代码使其“可拖动”:

createNewDiv(divId); <--local function that creates a new div with id=divId
$("#"+divId).draggable();

这使得具有element Id = divId的元素可拖动(感谢jquery libs),因此任何新创建的元素都可以拖放到任何地方现在

,假设我创建元素 A、B 和 C,它们都可拖动,然后将一个元素拖放到另一个元素之上(这样 C 保持在 B 上方,B 保持在 A 上方,就像纸张一样)一张一张地堆叠在另一张纸上)

有什么方法可以检测哪些元素在每个元素的下面?例如,当鼠标悬停在 C 上时,它会返回“元素 B 和元素 A 在下面......”(两者),或者当鼠标悬停在 B 上时,它会返回“元素 A 在下面”?

我研究了一些方法,如 elementFromPoint() 或 jquery 中的 .droppable() 方法,但我似乎无法在任何其他方法下方返回 --multiple elements-- (例如 C 返回其下方的 A 和 B )

我可以想象使用此代码的另一种方法是重写 .droppable() 并递归调用它,但目前我不知道如何实现。例如,当:

a) 删除 A 时,不会显示任何内容(其下方没有任何元素)

b) 将 B 删除到 A 上 - 显示“B on {A}”

c) 将 C 删除到 B 上 - “C on {B,A}” (C 找到 B,B 找到 A)

jQuery 或原生 Javascript 将不胜感激

I have a button that dinamically creates an object and makes it "draggable" with the following code using jquery:

createNewDiv(divId); <--local function that creates a new div with id=divId
$("#"+divId).draggable();

which makes the element with element Id = divId draggable (thanks to jquery libs), so any newly created element can be dragged and dropped anywhere in the page

Now, suppose that I create element A, B and C, all of them draggable, and I drag n' drop one above another (so C stays "over" B, and B stays "over" A, just like paper sheets stacked one above the other)

Is there any way to detect which elements are below each one of them? For example, when hovering over C it would return an "element B and element A are below.." (both of them) or when hovering B it would return "element A is below"?

I've investigated a few methods like elementFromPoint() or the .droppable() method from jquery, but I can't seem to return --multiple elements-- below any other (for example C to return both A and B below it)

Another way that I could imagine with this code is to override the .droppable() and invoke it recursively, but currently I don't see how. For example, when:

a) Dropping A, nothing gets displayed (no element below it)

b) Dropping B over A - "B on {A}" displayed

c) Dropping C over B - "C on {B,A}" (C finds B, which B finds A)

jQuery or native Javascript would be greatly appreciated

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

丘比特射中我 2024-10-26 13:19:10

我想最好的方法是这样做:

var bufferInteger = 0, dragParent = $( container ), dragChildren = {};
(function layerCalculation(){
    dragParent.find('.draggable').each(function(index, val){
        var child = $(val), 
          childOffset = {
            top    : child.offset().top,
            left   : child.offset().left,
            width  : child.width(),
            zIndex : child.css('z-index')
          };
        dragChildren[child.attr('id')].top = childOffset.top;
        dragChildren[child.attr('id')].left = childOffset.left;
        dragChildren[child.attr('id')].width = childOffset.width;
        dragChildren[child.attr('id')].zIndex = childOffset.zIndex;
    });
}());

function detectHover(ui){
    var currentlyOver,
        uiElement = ui.helper[0],
        underStacked = dragChildren, 
        draggedItem = {
        id     : uiElement.id,
        offset : {
            left : uiElement.offsetLeft,
            top  : uiElement.offsetTop
        }
    };
    underStacked.splice(understacked.indexOf(draggedItem.id), 1);

    for (var i in underStacked){
        if ((underStacked[i].left <= draggedItem.offsetLeft <= (underStacked[i].left - - underStacked[i].width)) {
            currentlyOver = underStacked.id;
        } else if (...) {
            // do some logic here to calculate draggedItem.offsetLeft + draggedItem.width
        }
    }
    if (typeof currentlyOver !== 'undefined'){
        return currentlyOver;
    } else {
        return false;
    }
}
$('.draggable').bind({
    dragstart : function(){
        layerCalculation();
    },
    dragend : function(){
        layerCalculation();
    },
    drag : function(event, ui){
        bufferInteger++;
        if (bufferInteger > 9){
            bufferInteger = 0;
            detectHover(ui);
            ...
            // do something with return ID here.
        }
    }
});

I'd imagine the best way to do this would be to do something like:

var bufferInteger = 0, dragParent = $( container ), dragChildren = {};
(function layerCalculation(){
    dragParent.find('.draggable').each(function(index, val){
        var child = $(val), 
          childOffset = {
            top    : child.offset().top,
            left   : child.offset().left,
            width  : child.width(),
            zIndex : child.css('z-index')
          };
        dragChildren[child.attr('id')].top = childOffset.top;
        dragChildren[child.attr('id')].left = childOffset.left;
        dragChildren[child.attr('id')].width = childOffset.width;
        dragChildren[child.attr('id')].zIndex = childOffset.zIndex;
    });
}());

function detectHover(ui){
    var currentlyOver,
        uiElement = ui.helper[0],
        underStacked = dragChildren, 
        draggedItem = {
        id     : uiElement.id,
        offset : {
            left : uiElement.offsetLeft,
            top  : uiElement.offsetTop
        }
    };
    underStacked.splice(understacked.indexOf(draggedItem.id), 1);

    for (var i in underStacked){
        if ((underStacked[i].left <= draggedItem.offsetLeft <= (underStacked[i].left - - underStacked[i].width)) {
            currentlyOver = underStacked.id;
        } else if (...) {
            // do some logic here to calculate draggedItem.offsetLeft + draggedItem.width
        }
    }
    if (typeof currentlyOver !== 'undefined'){
        return currentlyOver;
    } else {
        return false;
    }
}
$('.draggable').bind({
    dragstart : function(){
        layerCalculation();
    },
    dragend : function(){
        layerCalculation();
    },
    drag : function(event, ui){
        bufferInteger++;
        if (bufferInteger > 9){
            bufferInteger = 0;
            detectHover(ui);
            ...
            // do something with return ID here.
        }
    }
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文