Skip to content

Instantly share code, notes, and snippets.

@SyntaxStacks

SyntaxStacks/WhatADrag

Last active December 12, 2015 02:38
Show Gist options
  • Save SyntaxStacks/4700593 to your computer and use it in GitHub Desktop.
Save SyntaxStacks/4700593 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Dragging between multiple containers
Raw
WhatADrag
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>droppable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<style>
.draggable {
width: 100px;
height: 20px;
background: #ccc;
}
.droppable {
position: absolute;
left: 250px;
top: 0;
width: 125px;
height: 125px;
background: #999;
color: #fff;
padding: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
</head>
<body>
<div class="droppable">Drop here</div>
<div class="droppable" style="top: 250px;">Drop here</div>
<div class="droppable" style="top: 250px; left: 500px;">Drop here</div>
<div class="droppable" style="left: 500px;">Drop here</div>
<div class='draggable john'>Drag me</div>
<div class="draggable" >me2tho</div>
<script>
$( ".draggable" ).draggable();
$( ".droppable" ).droppable(
{ greedy: true },
{drop: function(event, ui) {
if(ui.draggable.attr('class').indexOf('john') >= 0){
ui.draggable.attr('style','position:relative');
$(this).append(ui.draggable);
}
//alert( "dropped" );
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment