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>

我想将 .draggablem 限制为 .dropable 并将 .draggableo 限制为 .dropable2。

非常感谢。

Answer 1

droppable 有一个选项 accept，您应该将其设置为与您的 draggables 相匹配的选择器。

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