在 jQuery UI 中可拖动将约束添加到目标到 div

【问题标题】：Draggable in jQuery UI add constraint to target to div在 jQuery UI 中可拖动将约束添加到目标到 div
【发布时间】：2012-07-13 11:14:56
【问题描述】：

我的页面很少有可拖动 (1,2) 和一些可拖放 (A,B)。如何指定用户只能从可拖动 1 拖放到可拖放“A”中？ P.S，其中一个 dropable 实际上是可排序的。

【问题讨论】：

标签： jquery jquery-ui drag-and-drop draggable droppable

【解决方案1】：

我想你可以使用参数accept:来实现这个。

示例：

$('.CssClassToDrag').draggable({ 
        containment: "#divDragAndDropArea", 
        scroll: false, 
        revert: "invalid" 
  });
$('.CssClassToDrop').droppable({
        accept: ".CssClassToDrag",
        hoverClass: "ui-state-active",
        activeClass: "ui-state-hover",
        drop: function (event, ui) {
            ...
        },

        out: function (event, ui) {
            ...
        }
    });

具有 CssClassToDrag 的可拖动项目只能拖放到可放置元素中。

【讨论】：