¿Cómo fuerzo a jquery a centrar un elemento cuando se arrastra y se ajusta a otro contenedor?
Quiero algunos objetos arrastrables de forma cuadrada (en este caso solo<td> cuadros con números en ellos) para poder ajustar a algunas celdas de una tabla vacía y ajustar al centro de esas celdas (cuadros de td vacíos), no al borde (exterior) de esas celdas, que es lo que parece hacer por defecto.
Aquí está mi guión:
<script type="text/javascript">
$(document).ready(function () {
$(".inputs div").draggable( {
snap: ".spaces"
});
});
</script>
EDITAR: Aquí está el archivo completo
<!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>
Aquí hay una ilustración aproximada basada en texto de lo que está pasando
-----+---------+
XXXXXXXXXXX X|
| |
| Y x|
| X|
-----+-------+X|
| X|
si el cuadro anterior es una celda td en la esquina derecha de la fila superior trluego X es donde los elementos se están pegando actualmente (obviamente no es tan grande, solo estoy mostrando los lugares donde se adhiere ... en realidad, quité algunas de las X para mostrar cómo se ajusta a la esquina una vez que alcanza una cierta cercanía lo...)Básicamente, este modelo demuestra que solo los bordes externos de la tabla tienen "gravedad" con respecto al elemento que se puede arrastrar. Lo que realmente quiero que haga es encajar en las celdas td conrepulsión A TODOS los bordes, no con atracción a los externos.Y es la ubicación deseada para el elemento arrastrado.Por último, por razones de presentación, me gustaría que el elemento encajara en su lugar con algún tipo de transición en lugar de un salto abrupto ...