jQuery UI - Droppable 只接受一个可拖动 [英] jQuery UI - Droppable only accept one draggable

问题描述

我正在制作一个应用程序，它使用一个可放置的 div 和几个可拖动的 divs.我怎样才能让 droppable 不接受多个可拖动的 div?我用谷歌搜索，但没有找到任何解决方法.

I'm making an app, that is using one droppable div and a few draggable divs. How can I make the droppable to not accept more than one draggable div? I Googled, but didn't find any workaround.

我想到了一个解决方法.我如何检查这个可放置的 div 中是否有放置的元素?如果它很忙，则恢复这个正在尝试删除的可拖动

A workaround came up in mi mind. How can i check is there's dropped element in this droppable div? If it's busy then revert this draggable, which is trying to be dropped

推荐答案

OK 找到了一个很好的解决方案，基本上在放置"时我将放置项设置为仅接受已被拖入其中的项目.

OK found a nice solution for this, essentially on 'drop' I set the droppable to only accept the item which has been dragged into it.

当您禁用"时，您需要重新初始化的out"事件不再可用，因此我只是切换了符合条件的项目.

When you 'disable', the 'out' event that you need to re-initialize isn't available anymore, so instead I just switched the eligible items around.

然后我可以使用 OUT 事件重新接受所有可拖动的项目，因为没有其他任何东西被接受，OUT 不会被其他可拖动的项目触发:

Then it's possible for me to use the OUT event to re-accept all draggable items and because nothing else is accepted the OUT won't be triggered by other draggables:

$(".drop-zone").droppable({
    drop: function(event, ui) { 
        $(this).droppable('option', 'accept', ui.draggable);
    },
    out: function(event, ui){
        $(this).droppable('option', 'accept', '.drag-item');
        }   
    });
});

这篇关于jQuery UI - Droppable 只接受一个可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！