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

问题描述

我正在制作一个应用程序，该应用程序使用一个可放置的div和一些可拖动的div.如何使可放置项不接受多个可拖动的div?我用Google搜索，但没有找到任何解决方法.

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.

我想到了一种解决方法.我如何检查此droppable 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为此找到了一个不错的解决方案，本质上是在'drop'上，我将droppable设置为仅接受已拖动到其中的项目.

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.

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

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屋！