Jak zmusić jquery do wyśrodkowania elementu, gdy jest on przeciągany do i przyciągany do innego kontenera?
Chcę kilka kwadratowych obiektów przeciąganych (w tym przypadku tylko<td> pola z numerami w nich), aby móc przyciągnąć do niektórych pustych komórek tabeli i przyciągnąć do środka tych komórek (puste pola td), a nie do (zewnętrznych) krawędzi tych komórek, co domyślnie się robi.
Oto mój skrypt:
<script type="text/javascript">
$(document).ready(function () {
$(".inputs div").draggable( {
snap: ".spaces"
});
});
</script>
EDYCJA: Oto cały plik
<!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>
Oto szorstka ilustracja tekstowa tego, co się dzieje
-----+---------+
XXXXXXXXXXX X|
| |
| Y x|
| X|
-----+-------+X|
| X|
jeśli powyższe pole jest komórką td w prawym rogu najwyższego wiersza trwtedy X jest miejscem, w którym elementy obecnie się przyklejają (oczywiście nie jest tak duży, pokazuję tylko miejsca, w których elementy się trzymają ... właściwie usunąłem niektóre litery X, aby pokazać, jak chwyta się rogu, gdy osiągnie pewną bliskość do tego ...)zasadniczo ten model pokazuje, że tylko zewnętrzne krawędzie tabeli mają „grawitację” w odniesieniu do elementu przeciągalnego. To, czego naprawdę chcę, to wskoczyć w komórki tdodpychanie na WSZYSTKIE krawędzie, a nie na przyciąganie do zewnętrznych.Y jest pożądanym miejscem przyciągania dla przeciągniętego elementu.Na koniec ze względów prezentacyjnych chciałbym, aby element został przyciągnięty na miejsce z jakimś przejściem, a nie skokiem ...