HTML 拖放 - 放置区

Question

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

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

Answer 1

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

正如您从源代码中看到的那样，拖动山墙元素可以自由移动，但我们也为其提供了使用 'snap' 捕捉到某些元素的选项。

  $( 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 拖放 - 放置区

HTML Drag and Drop - Dropping Area

html

jquery

drag-and-drop

jscript