【发布时间】：2012-07-08 11:24:31
【问题描述】：
我想要一些方形的可拖动对象（在这种情况下只是 <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>
这是一个粗略的基于文本的说明
-----+----------+ XXXXXXXXXXXX X| | | |是 x| | X| -----+-------+X| | X|- 如果上面的框是最上面tr行右上角的td单元格
- 那么 X 是元素当前所在的位置（显然不是 大，我只是显示它粘的地方......实际上我删除了 一些 X 显示它在到达某个位置后如何捕捉到角落 与它有一定的接近性...）
- 基本上这个模型展示了只有桌子的外部边缘 关于可拖动元素具有“重力”。我真正想要的 要做的是用 repelling 将所有边缘卡入 td 单元格，而不是 对外部的吸引力。
- Y 是拖动元素所需的对齐位置。
- 最后，出于演示的原因，我希望元素卡入到位 有某种过渡而不是突然的跳跃......
【问题讨论】：
-
您希望可拖动元素在 tds 中垂直和水平居中吗？因为它们不太适合。
-
4000 次观看。 9 票赞成正确答案。 4关于问题。唧唧喳喳。签到你们这些懒汉！！！
标签： javascript jquery css jquery-ui jquery-ui-draggable