jquery - jQuery UIでドラッグ可能で、ターゲットに制約を追加してdivに追加

Question

ドラッグ可能（1,2）とドロップ可能（A、B）が少ないページがあります。ユーザーがドラッグ可能な1からドロップ可能な「A」にのみドロップできるように指定するにはどうすればよいですか？PS、ドロップ可能の1つは実際にソート可能です。

Answer 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を使用してドラッグ可能なアイテムは、ドロップ可能な要素にのみドロップできます。