jQuery UI Draggable无法从正确的位置拖动 [英] jQuery UI Draggable not dragging from the correct place
本文介绍了jQuery UI Draggable无法从正确的位置拖动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我抓起我的可拖动对象时，它们似乎无法正确对齐到右侧的网格-这让我感到困惑！
When I grab my draggable(s), they seem to snap incorrectly to the grid on the right - this has me confused!
有什么想法可以拖动元素并使它更贴近光标吗?
Any idea how I can drag an element and have it snap closer to my cursor??
代码:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="sys/jquery-1.4.2.js"></script>
<script type="text/javascript" language="javascript" src="sys/jquery-ui-1.8.4.min.js"></script>
<style type="text/css">
* { font-family: arial; font-size: 11px; margin: 0; padding: 0; }
div#create-container { width: 900px; height: 500px; min-height: 500px; background-color: #666; margin: 0 auto; }
div#create-sections { width: 100px; height: 500px; min-height: 500px; background-color: #555; float: left; }
ul#node-grid { width: 200px; height: 200px; min-height: 200px; background-color: #777; float: right; }
li.grid-node { width: 20px; height: 20px; min-height: 20px; background-color: darkred; display: block; float: left; list-style-type: none; }
div.onepx { width: 20px; height: 20px; min-height: 20px; background-color: #000; position: absolute; float: left; margin-left: 40px; margin-top: 40px; }
</style>
<script type="text/javascript">
$(document).ready(function() {
//add sections to page
function addSections() {
var numParts = 10;
var addItems = numParts;
var addMoreItems = numParts*10;
while (addItems >= 0) {
$('div#create-sections').append('<div class="onepx"></div>');
addItems--;
}
while (addMoreItems > 0) {
$('ul#node-grid').append('<li class="grid-node"></li>');
addMoreItems--;
}
}
// init
addSections();
$(".onepx").draggable({ snap: '.grid-node', snapMode: 'inner', snapTolerance: 20, containment: '#create-container', opacity: 0.5 });
});
</script>
</head>
<body>
<div id="create-container">
<div id="create-sections"></div>
<ul id="node-grid"></ul>
</div>
</body>
</html>
推荐答案
问题出在这里:
div.onepx { margin-left: 40px; margin-top: 40px; }
如果您删除了这些边距，它将按需放置在光标上，查看更新的示例这里:)
If you remove those margins, it'll be location on the cursor like you want, see an updated example here :)
您可以给#create-sections填充以得到类似的初始位置效果，如下所示:
You can give the #create-sections the padding to get a similar initial-position effect, like this:
div#create-sections {
width: 60px; /* 100 - 40 */
height: 460px; /* 500 - 40 */
min-height: 460px; /* 500 - 40 */
background-color: #555;
float: left;
padding: 40px 0 0 40px; /* top, left: 40px */
}
这篇关于jQuery UI Draggable无法从正确的位置拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
