HTML拖放 - 删除区域

时间:2017-09-12 18:04:54

标签: jquery html5 drag-and-drop jscript

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

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

1 个答案:

答案 0 :(得分:0)

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

https://jqueryui.com/draggable/#snap-to

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

  $( 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