Drag / Drop Test

by jamygolden

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<div id="box1"></div>
<div id="box2"></div>
<hr /><hr />
<div id="box3"></div>
<div id="box4"></div>

CSS

div { float: left; height: 100px; width: 100px; }
#box1 { background: red; }
#box2 { background: papayawhip; }
#box3 { background: green; }
#box4 { background: blue; }

hr { clear: both; }

JavaScript

$( "#box1" ).draggable({ greedy: false, revert: "invalid", snap: '#box3', snapMode: 'inner', snapTolerance: 80 });
        $( "#box2" ).draggable({ revert: "invalid" });

        $( "#box3" ).droppable({
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {
                $( this )
                    .addClass( "ui-state-highlight" )
                    .find( "p" )
                        .html( "Dropped!" );
            }
        });

        $( "#box4" ).droppable({
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {
                $( this )
                    .addClass( "ui-state-highlight" )
                    .find( "p" )
                        .html( "Dropped!" );
            }
        });