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

我有一个网站，我有一套拖拽，我想限制只显示它的信息时，投到一个特定的可拖放

这是我的密码：

<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”）.draggable({
回复：对，
不透明度：.75，
安全壳：'.container'，
光标：“移动”，
库索拉特：{
前25名，
左：75
}
});
$（“.draggableo”）.draggable({
回复：对，
不透明度：.75，
安全壳：'.container'，
光标：“移动”，
库索拉特：{
前25名，
左：75
}
});
$（“.dropable”）.dropable({
activeClass:“dragactive”，
hoverClass:“drophover”，
drop：函数（事件、用户界面）{
$（this.addClass（'drophighlight'）.find（'p'）.html（'
'+ui.draggable.children（'span'）.text（））；
}
});
$（“.dropable2”）.dropable2({
activeClass:“dragactive”，
hoverClass:“drophover”，
drop：函数（事件、用户界面）{
$（this.addClass（'drophighlight'）.find（'p'）.html（'
'+ui.draggable.children（'span'）.text（））；
}
});
}); 

我想将

.draggablem

限制为

.dropable

和

.draggableo

限制为

.dropable2

---

非常感谢。

下拉列表有一个选项

accept

，您应该将该选项设置为与拖动列表匹配的选择器

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

---

可拖放设备有一个选项

accept

，您应该将该选项设置为与可拖放设备匹配的选择器

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

---

你的问题不是很清楚

您可以使用

accept

选项定义允许删除的内容，但这不是问题的措辞

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

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

        }
    }
});

---

你的问题不是很清楚

您可以使用

accept

选项定义允许删除的内容，但这不是问题的措辞

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

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

        }
    }
});