javascript - 如何将一组可拖动对象限制为一个可放置对象，将另一组可拖动对象限制为第二个可放置对象

Question

我有一个网站，我有一组要限制为仅在放入特定可放置对象时显示其信息的可拖动对象。

这是我的代码：

<script type = "text/javascript"> 

$(function() {

    $(".draggablem").draggable({
        revert: true,
        opacity: .75,
        containment: '.container',

        cursor: 'move',
        cursorAt: {
            top: 25,
            left: 75
        }

    });

    $(".draggableo").draggable({
        revert: true,
        opacity: .75,
        containment: '.container',
        cursor: 'move',
        cursorAt: {
            top: 25,
            left: 75
        }

    });

    $(".dropable").droppable({
        activeClass: 'dragactive',
        hoverClass: 'drophover',
        drop: function(event, ui) {
            $(this).addClass('drophighlight').find('p').html('<br />' + ui.draggable.children("span").text());
        }
    });

    $(".dropable2").droppable({
        activeClass: 'dragactive',
        hoverClass: 'drophover',
        drop: function(event, ui) {
            $(this).addClass('drophighlight').find('p').html('<br />' + ui.draggable.children("span").text());
        }
    });

}); 
</script>

我想限制.draggablemto.dropable和.draggableoto .dropable2。

非常感谢。

Answer 1

droppable 有一个选项accept，您应该将其设置为与您的可拖动对象匹配的选择器。

$('.dropable2').droppable({
    ...,
    accept: '.draggableo'
)};

Answer 2

你的问题不是很清楚。

您可以使用该accept选项来定义允许删除的内容，但这不是您表达问题的方式。

如果允许删除任何元素，但问题状态仅显示何时删除特定类：

$(".dropable").droppable({
    drop: function(event, ui) {
        if (ui.draggable.is('.myAllowedClass')) {
            /* do highlight*/      

        }
    }
});