我在DnD做一个网站,当您将图像放在右侧的div中时,它不会停留在所需的位置(绿色区域)
https://i.stack.imgur.com/xKft0.jpg
我怎样才能免费投放?
谢谢你的一切,抱歉我的英语不好
答案 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