Как заставить jquery центрировать элемент, когда он перетаскивается в другой контейнер?
Я хочу, чтобы некоторые перетаскиваемые объекты квадратной формы (в данном случае просто<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|
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...