Question

我在DnD做一个网站，当您将图像放在右侧的div中时，它不会停留在所需的位置（绿色区域）
https://i.stack.imgur.com/xKft0.jpg
我怎样才能免费投放？

谢谢你的一切，抱歉我的英语不好

Answer 1

这是捕捉到网格或其他元素时自由移动的完美示例。希望能帮助到你！

从源头可以看出拖曳山墙元素可以自由移动，但我们也可以选择使用“快照”捕捉到某些元素。

  $( function() {
    $( "#draggable" ).draggable({ snap: true });
    $( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
    $( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
    $( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
    $( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
  } );

此处还有一个示例，如果元素没有与另一个元素对齐，则将元素恢复为原始位置。

$(function() {
    $("#draggable").draggable({
        revert : function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("uiDraggable").originalPosition = {
                top : 0,
                left : 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
        }
    });
    $("#droppable").droppable();
});

Revert a jQuery draggable object back to its original container on out event of droppable

HTML拖放 - 删除区域

1 个答案: