Jquery “自然”拖放并重新刷新
我想将一个项目从一个div“original”拖动到另一个“target”，并将该div重新设置为目标div的父级 我想让“拖拽”，在重新养育孩子时，降落在它所处的位置。你正在从第一分区撕下一张贴纸，然后把它放在第二分区上：当我把鼠标移到上面时，它正好落在原来的位置 当我尝试使用下面的代码时，“拖动”根据其相对于“原始”的位置将其自身定位在“目标”中。e、 g.如果在我放下“drag”时“drag”偏离“original”300，则在重新设置父项时，它将偏离“target”300，这会导致跳转b/c“target”和“original”没有相同的左上角 长期来看，“原始”div可能相当复杂，例如一个滚动面板的标签，或标签或其他任何东西，因此我不希望在“原始”中出现类似“拖动”的欺骗 我曾经尝试过做一些复杂的数学fu，基于我在下降时的“目标”和“下降”的全球位置，但1面对边距、填充、缩放等，这是一种痛苦，2我认为这会更容易。这似乎是一个相当基本的期望，一件物品停留在掉落的地方 代码：Jquery “自然”拖放并重新刷新,jquery,html,drag-and-drop,Jquery,Html,Drag And Drop,我想将一个项目从一个div“original”拖动到另一个“target”，并将该div重新设置为目标div的父级 我想让“拖拽”，在重新养育孩子时，降落在它所处的位置。你正在从第一分区撕下一张贴纸，然后把它放在第二分区上：当我把鼠标移到上面时，它正好落在原来的位置 当我尝试使用下面的代码时，“拖动”根据其相对于“原始”的位置将其自身定位在“目标”中。e、 g.如果在我放下“drag”时“drag”偏离“original”300，则在重新设置父项时，它将偏离“target”300，这会导致跳转b
演示：像这样？目前已硬编码，但可以计算偏移校正。小更新：感谢您的快速响应。是的，这就是我想要的行为。不过，我不知道34是从哪里来的。我知道“原创”比“下降”少30个，我猜其他4个不知何故来自边境。一旦我处于一个更具活力的环境中，我想我将不得不通过定位来搞定这一切。特别是如果“drag”在“original”里面的滚动控件中，它实际上最适合33，但我可以用2px边框来解释34。
<!DOCTYPE html>
<html>
<head>
<title>Test Drop</title>
<script src="libraries/javascript/third_party/jquery-1.7.1.js" type="text/javascript"></script>
<script src="libraries/javascript/third_party/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var $dest = $('#destinationDiv');
var $src = $('#originalDiv');
var $drag = $('#draggableDiv');
$dest.droppable({accept: '#draggableDiv',
drop: function(event, ui) {
$dest.append(ui.draggable);
},
tolerance: 'fit',
});
$drag.draggable({appendTo: '#destinationDiv',
// helper: 'clone',
revert: 'invalid',
revertDuration: 100,
});
});
</script>
<style>
#destinationDiv {
position:absolute;
width: 500px;
height: 500px;
background: #cccccc;
border:solid;
top: 50px;
left: 50px;
}
#originalDiv {
position:absolute;
width: 200px;
height: 200px;
top: 30px;
left: 30px;
background: #ddccff;
border:solid;
}
#draggableDiv {
position:absolute;
width: 100px;
height: 100px;
top: 10px;
left: 10px;
background: #ccffdd;
border:solid;
}
</style>
</head>
<body>
<div id=destinationDiv>
<div id=originalDiv>
<div id=draggableDiv></div>
<div>
<div>
</body>
</html>