いくつかの正方形のドラッグ可能なオブジェクト (この場合は<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|
| | | |
| | Yx|
| | X|
---+-------+X|
| | X|
- 上記のボックスが一番上の tr 行の右隅にある td セルの場合
- 次に、Xは要素が現在くっついている場所です（明らかにそれほど大きくはありません。くっついている場所を示しているだけです...実際には、Xの一部を削除して、特定の近さに達したときに角にスナップする方法を示していますそれに…）
- 基本的に、このモデルは、テーブルの外部エッジのみがドラッグ可能な要素に関して「重力」を持つことを示しています。私が本当にやりたいことは、外部エッジへの引力ではなく、すべてのエッジへの反発で td セルにスナップすることです。
- Y は、ドラッグされた要素の目的のスナップ位置です。
- 最後に、プレゼンテーション上の理由から、突然のジャンプではなく、ある種のトランジションで要素を所定の位置にスナップしたいと思います...