我要一些方形可拖动的对象（在这种情况下只是<td>在他们的数字框），以便能够捕捉到一些空表格单元和捕捉到的那些细胞的中心（空TD框），而不是（外）边缘的细胞，这是什么东西，似乎在默认情况下做的。
这里是我的脚本：
<script type="text/javascript">
$(document).ready(function () {
$(".inputs div").draggable( {
snap: ".spaces"
});
});
</script>
编辑：这里是整个文件
<!DOCTYPE html>
<head>
<title>Draggable</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
<style>
.block {
z-index:9999;
cursor:move;
}
li {
list-style:none;
}
tr {
border: 2px solid black;
}
table {
border: 2px solid black;
}
.inputs div {
float:left;
background-color:#FFFFFF;
color:#004E66;
font-size:x-large;
margin:2px;
padding:20px;
border:1px solid black;
}
.spaces td {
background-color:#666666;
margin:2px;
padding:36px;
border:2px solid black;
}
</style>
</head>
<body>
<form id="form1">
<div class="inputs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<br/>
<table class="spaces">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
<!-- here we are telling jquery to make each element inside of class 'inputs' draggable -->
<script type="text/javascript">
$(document).ready(function () {
$(".inputs div").draggable( {
snap: ".spaces"
}).center();
});
</script>
这里是发生了什么事情的一个粗略的基于文本的说明
-----+---------+
XXXXXXXXXXX X|
| |
| Y x|
| X|
-----+-------+X|
| X|
- 如果上面的框是在最上面一行TR的右上角一个TD手机
- 那么X是其中的元素目前坚持（显然它没有那么大，我只是表示在它坚持的地方......其实我删除了一些X的，以显示它是如何捕捉到的角落，一旦达到一定的封闭性它...）
- 基本上这个模型表明，只有表的外部边缘有“万有引力”，与可拖动的元素。 我真正想要做的是捕捉到TD细胞排斥所有边缘，不与吸引力的外部因素。
- Y是所需的管理单元用于拖动的元素的位置。
- 最后呈现的原因，我想元素咬合到位带有某种过渡，而不是突然跳跃...
Answer 1:
我相信这是你想要的。
你可以明显改变的定位，如果你想和它适合您的需要更好。
演示是在这里： DEMO
$(document).ready(function () {
$(".inputs div").draggable( {
opacity: .4,
create: function(){$(this).data('position',$(this).position())},
cursorAt:{left:15},
cursor:'move',
start:function(){$(this).stop(true,true)}
});
$('.spaces').find('td').droppable({
drop:function(event, ui){
snapToMiddle(ui.draggable,$(this));
}
});
});
function snapToMiddle(dragger, target){
var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
var leftMove= target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
dragger.animate({top:topMove,left:leftMove},{duration:600,easing:'easeOutBack'});
}
Answer 2:
在snapToMiddle功能一个注意：
为了得到它为我正常工作，我不得不将其更改为>
function snapToMiddle(dragger, target){
var offset = target.offset();
var topMove = (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
var leftMove= (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
dragger.offset({ top: topMove + offset.top, left: leftMove + offset.left })
}
另外，我创建了一个相关的牵引机，以滴管和窗口大小调整我保证我所有的滴管不要跑题的数组：
$( window ).resize(function() {
for( i = 0 ; i < assc.length - 1 ; i++ )
{
var drp = assc[i].drop;
var drg = assc[i].drag;
snapToMiddle(drg,drp);
}
});
Answer 3:
http://jsfiddle.net/vtdhV/
我创建了一个解决您的问题..之类的（如果我理解正确的话）小提琴。
红色的div是在中居中td秒，你捕捉到那些代替。 只是删除边框，它就会出现捕捉到TD的中心。 的性质.draggable会导致拖拽元素捕捉到任何边缘而不是同时所有边缘。
如果这还不够，你可能要实施调用句柄.stop ，调整根据您的期望元素的位置。
Answer 4:
你需要指定一个单元的目标，其大小为您拖动的元素相同。 这不是一个大问题，如果你的拖拽元素总是一样的大小。 就在你的细胞中添加一个空的，绝对定位的div，并设置你的CSS，以便它的大小和正确居中。 然后，设置您的snap选择是该分区。 如果只捕捉到你的卡体的内部，设置您的snapMode以"inner" 。
$(".inputs div").draggable({
snap: ".spaces td div",
snapMode: "inner"
});
但是，如果你拖拽元素的大小可能会有所不同，你需要调整和每次启动拖动一个元素时recenter您的拖放目标。 做到这一点的可拖动鼠标按下的（用mousedown因dragstart是太晚了，不工作）：
$(".inputs div").draggable({
snap: ".spaces td div",
snapMode: "inner",
}).mousedown(function(){
var targets = $(".spaces td div");
targets.height(this.offsetHeight);
targets.width(this.offsetWidth);
targets.each(function(){
$(this).position({ of: this.parentNode });
});
});
http://jsfiddle.net/gilly3/mPr3A/
Answer 5:
添加一个div在这些TDS和给予的TDS和新加入的div固定的宽度和高度居中。 然后跨越拖拽元素，以这些div。
$(document).ready(function () {
$('<div></div>').appendTo('.spaces td');
$(".inputs div").draggable({
snap: ".spaces td div",
snapMode:'inner'
});
});
此外CSS的TDS和div的将是如下。
.block {
z-index:9999;
cursor:move;
}
.productCode {
}
li {
list-style:none;
}
tr {
border: 2px solid black;
}
table {
border: 2px solid black;
}
.inputs div {
float:left;
background-color:#FFFFFF;
color:#004E66;
font-size:x-large;
margin:2px;
padding:20px;
border:1px solid black;
}
.spaces td {
background-color:#666666;
width:80px;
height:80px;
border:2px solid black;
}
.spaces td div {
margin:0 auto;
width:50px;
height:70px;
}
小提琴演示- http://jsfiddle.net/nsjithin/u25Bs/1/
Answer 6:
如果我有问题吧，有了这个替换当前的脚本：
$(document).ready(function () {
// create a bunch of invisible divs
var divs = $('<div></div><div></div><div></div><div></div>');
// make them 2/2 and add them to the existing tds
divs.css({ width:'50%', float:'left' }).appendTo('.spaces td');
// snap to everything
$(".inputs div").draggable({snap: ".spaces td, .spaces td div" }).center();
});
如果我不只是说，我会解决它。
文章来源: How do I force jquery to center an element when it is dragged to and snapped to another container?
