Question

我有一个网站，其中有一组我想要限制的可拖动内容，只有在下载到特定的droppable时才能显示它的信息。

这是我的代码：

<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'
)};

Answer 2

你的问题不是很清楚。

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

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

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

        }
    }
});

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

2 个答案: