javascript - jQuery droppable 不适用于绝对定位

Question

我有一个分成 6 个网格的 div。这些网格使用绝对定位进行放置。

由于某些原因，jQuery droppable 无法在那些绝对 div 上工作。

有人能告诉我我的代码有什么问题吗？

我创建了一个 jsfiddle here向您展示我当前的代码。

这是 jQuery 部分。

$(".ui-draggable").draggable({
        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit',
        stack: '.ui-draggable',
        revert: "invalid"
    });

    $(".ui-droppable").droppable({
        accept: ".ui-draggable"
    });

Answer 1

它似乎工作正常，试试这个

$(".ui-draggable").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    stack: '.ui-draggable',
    revert: "invalid"
});

$(".ui-droppable").droppable({
   accept: ".ui-draggable",
   drop: function( event, ui ) {
      alert('dropped');
   }
});

您会看到 drop 事件正确触发

您是否期待一些额外的行为？

如果你想让图片留在你放下它的地方，使用

$(".ui-draggable").draggable({
     stack: '.ui-draggable',
     revert: "invalid"
});