I want some square-shaped draggable objects (in this case just <td> boxes with numbers in them) to be able to snap to some empty table cells and snap to the center of those cells (empty td boxes), not the (outer) edge those cells, which is what is seems to do by default.
Here's my script.:
<script type="text/javascript">
$(document).ready(function () {
$(".inputs div").draggable( {
snap: ".spaces"
});
});
</script>
EDIT: Here is the entire file
<!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>
Here's a rough text-based illustration of what's going on
-----+---------+
XXXXXXXXXXX X|
| |
| Y x|
| X|
-----+-------+X|
| X|
- if the above box is a td cell in the right corner of the topmost tr row
- then X is where the elements are currently sticking (obviously its not that
large, I'm just showing the places where it sticks...actually I removed
some of the X's to show how it snaps to the corner once it reaches a
certain closeness to it...)
- basically this model demonstrates that only the external edges of the table
have "gravity" with regards to the draggable element. What I really want it
to do is snap into the td cells with repulsion to ALL the edges, not
with attraction to the external ones.
- Y is the desired snap-to location for the dragged element.
- Lastly for presentation reasons I would want the element snap into place
with some sort of transition rather than an abrupt jump...
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
