Moving into the jQuery UI section and testing the dragging and dropping functions.
Notice in the demo that the box on the right is set to float:right, so if you supposedly dropped the green box into it, and change your window width, the green (turned light grey) box stays at the same place while the right box moves to the left. Got to fix that experience in future, more complex versions.
8 August 2009
<div>
<div id="box">
Just a box styled by jQuery. Can't do anything to it.
</div><!--end #box -->
<div id="dragBox">
You're supposed to be able to drag this box. Try it!
</div><!-- end #dragBox -->
<div id="dropBox">
Try to drop the box here!
</div><!-- end #dropBox -->
</div>
$("#box").css({
"width":"100px",
"height":"200px",
"background-color":"#ffff00"
});
$("#dragBox")
.css({
"width":"200px",
"height":"100px",
"background-color":"#00ff00"
})
.draggable({
start: function (){
$(this).text("Dragging is now turned on! Drag the box around!");
},
drag: function (){
$(this).text("Dragging!");
},
stop: function (){
$(this).text("Dragging stopped. Try to pick it up again!");
}
});
$("#dropBox")
.css({
"width":"400px",
"height":"300px",
"background-color":"#999",
"float":"right"
})
.droppable({
drop: function() {
$(this)
.css({
"background-color":"#f00"
})
.text("You dropped the box!");
$("#dragBox")
.css({
"background-color":"#ccc"
})
.draggable('destroy')
.text("Box is dropped. You can't take it out!");
},
tolerance: 'fit'
});