public
Created

Draggable html example

  • Download Gist
draggable.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
<!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>
<link href='index.css' rel='stylesheet' type='text/css'>
</head>
<h1>Draggable</h1>
<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>
<script>
$(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'
});
}‚Äč
 
</script>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.