Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Draggable html example
<!DOCTYPE html>
<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'>
<form id="form1">
<div class="inputs">
<table class="spaces">
$(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)
drop: function(event, ui) {
snapToMiddle(ui.draggable, $(this));
function snapToMiddle(dragger, target) {
var topMove = target.position().top -'position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
var leftMove = target.position().left -'position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
top: topMove,
left: leftMove
}, {
duration: 600,
easing: 'easeOutBack'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment