我正在尝试制作一个拖放脚本,但我卡住了。我想要实现的是:从一侧拖动元素并将它们放入 div
中。当我移动该 div
内的元素时,我的左侧和顶部位置应该从可放置 div
的边缘计算,而不是整个文档。因此,即使在刷新后,我也可以在确切的位置排列和显示拖动的 div
。
我的问题是如何获取 div 的位置并进行 ajax 调用以将它们存储在数据库中。这是我的代码和 jsfiddle:
html
<div data-id="1" class="ui-widget-content draggable">
<p>Drag me </p>
</div>
<div data-id="2" class="ui-widget-content draggable">
<p>Drag me </p>
</div>
<div data-id="3" class="ui-widget-content draggable">
<p>Drag me </p>
</div>
<div data-id="4" class="ui-widget-content draggable">
<p>Drag me</p>
</div>
<div data-id="5" class="ui-widget-content draggable">
<p>Drag me </p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
<div id="pos"></div>
js
$(function() {
$( ".draggable" ).draggable
(
{
drag: function(){
var pos=$(this).attr('style');
$("#pos").html(pos);
}
});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
jsfiddle jsfiddle
编辑
我更新了代码,设法获取了 div
的位置,但它并没有从可放置 div
的边缘获取它,它从整个文档中获取位置。
最佳答案
好吧,我设法让它正常工作,如果将来有人需要的话,这里是 jsfiddle 和 jquery。 jquery
$(function() {
var pos=null;
var parent=null;
var current=null;
$( ".draggable" ).draggable
(
{
drag: function(){
pos = $(this).offset();
parent = $( "#droppable" ).offset();
current = {left: pos.left - parent.left, top: pos.top - parent.top };
$("#pos").html( current.left + ', ' + current.top );
}
});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$.ajax({
method: "POST",
url: "insert.php",
data: { name: current.left, location: current.top }
})
}
});
});
关于jquery - 拖放 div 并存储位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32497445/