Wie kann ich jquery zwingen, ein Element zu zentrieren, wenn es in einen anderen Container gezogen und dort gefangen wird?
Ich möchte ein paar quadratische ziehbare Objekte (in diesem Fall nur<td> Felder mit Zahlen in ihnen), um in der Lage zu sein, an einigen leeren Tabellenzellen und in der Mitte dieser Zellen zu fangen (leere td-Felder), nicht am (äußeren) Rand dieser Zellen, was standardmäßig zu tun scheint.
Hier ist mein Drehbuch:
<script type="text/javascript">
$(document).ready(function () {
$(".inputs div").draggable( {
snap: ".spaces"
});
});
</script>
BEARBEITEN: Hier ist die gesamte Datei
<!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>
Hier ist eine grobe textbasierte Illustration dessen, was los ist
-----+---------+
XXXXXXXXXXX X|
| |
| Y x|
| X|
-----+-------+X|
| X|
wenn das obige Kästchen eine td-Zelle in der rechten Ecke der obersten tr-Reihe istDann kleben die Elemente gerade an X (offensichtlich ist es nicht so groß, ich zeige nur die Stellen, an denen sie kleben ... tatsächlich habe ich einige der X entfernt, um zu zeigen, wie sie an der Ecke einrasten, sobald sie eine bestimmte Nähe erreicht haben dazu ...)Im Grunde genommen zeigt dieses Modell, dass nur die Außenkanten des Tisches in Bezug auf das ziehbare Element "Schwerkraft" haben. Ich möchte wirklich, dass es in die td-Zellen einrastetAbstoßung zu ALLEN Kanten, nicht mit Anziehungskraft auf die äußeren.Y ist die gewünschte Einrastposition für das gezogene Element.Zum Schluss möchte ich aus Darstellungsgründen, dass das Element mit einer Art Übergang einrastet und nicht mit einem plötzlichen Sprung ...