使拖放的元素可放置，同时仍可拖动

Making dragged and dropped element droppable while still being draggable

本文关键字：拖动 拖放 元素      更新时间：2023-09-26

我一直在尝试实现如下功能：

-您可以将多个 450x150 拖放到.drop_cont

-然后您可以将 300x150 拖放到 450x150 上

我尝试添加和删除类，但它似乎不起作用。有什么办法可以做到这一点吗，可能有一些我没有想到的方法。

演示：js小提琴

示例代码：

$(document).ready(function () {
$( ".idg_row" ).draggable({
    helper: "clone",
    appendTo: "body",
    containment:"document",
    revert: true,
    stop: function( event, ui ) {
        check();
    }
});
$( ".idg_column" ).draggable({
    helper: "clone",
    appendTo: "body",
    containment:"document",
    revert: true,
    stop: function( event, ui ) {
        check();
    }
});
$( ".drop_cont" ).droppable({
    accept: ".idg_row",
    drop: function (event, ui) {
        ui.draggable.clone().appendTo($(this)).draggable();
    }
});
$( ".droppableC" ).droppable();
});
function check() {
  $('.drop_cont .idg_row').addClass('droppableC');
  $('.drop_cont .idg_column').addClass('droppableC');
}

添加类后，您需要调用可放置元素以在新元素上运行。

function check() {
  $('.drop_cont .idg_row').addClass('droppableC');
  $('.drop_cont .idg_column').addClass('droppableC');
  $('.droppableC:not(.ui-droppable)' ).droppable();
}
相关文章：