Menu
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|
233
I believe this is what you want.
You can obviously change the positioning if you want and it suits your needs better.
Demo is here: DEMO
$(document).ready(function () {
$(".inputs div").draggable( {
opacity: .4,
create: function(){$(this).data('position',$(this).position())},
cursorAt:{left:15},
cursor:'move',
start:function(){$(this).stop(true,true)}
});
$('.spaces').find('td').droppable({
drop:function(event, ui){
snapToMiddle(ui.draggable,$(this));
}
});
});
function snapToMiddle(dragger, target){
var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
var leftMove= target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
dragger.animate({top:topMove,left:leftMove},{duration:600,easing:'easeOutBack'});
}
One note on the snapToMiddle function:
In order to get it to work properly for me I had to change it to >
function snapToMiddle(dragger, target){
var offset = target.offset();
var topMove = (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
var leftMove= (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
dragger.offset({ top: topMove + offset.top, left: leftMove + offset.left })
}
Also, I created an array that associated the dragger to the dropper and on window reSize I make sure all my droppers don't wander off:
$( window ).resize(function() {
for( i = 0 ; i < assc.length - 1 ; i++ )
{
var drp = assc[i].drop;
var drg = assc[i].drag;
snapToMiddle(drg,drp);
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
