I feel kinda bad to be calling this dirty, but mind you, I’m only using dirty as an expression, as it’s freaking sweet.
In fact, I’ve been having a few ideas about using drag & drop for an open source application I’ve been thinking of, and decided to play with jQuery UI to do that.
The fine guys at Packt have recently sent me a jQuery UI 1.6 book and I’ve been able to come up with this
It’s a pretty simple example I know, but it took me only a few minutes to come up with it. if you come from the old-school javascript times, you know that it would take you hours, if not days to develop something similar, and you’d still have all the hassle of testing it in multiple browsers.
I’ll try to explain what my code does here, but the comments pretty much say everything.
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.6");
// -->
</script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.6");
// -->
</script>
This is what I use to invoke the jQuery UI. Notice that I load the whole jquery from Google servers, so it almost don’t use any of my bandwidth.
I then create some CSS for displaying purposes of my screen objects.
#drag {
width: 100px;
height: 70px;
background: silver;
cursor: move;
}
#target {
width:200px;
height:200px;
border:3px solid #000;
position:absolute;
right:20px;
top:20px;
z-index:1;
float:right;
}
And now it’s time for the magic to happen. All the functionality will be on the following lines, and the comments pretty much say everything that’s being done:
<script type="text/javascript">
<!--
$(document).ready(function(){
//Create a callback function for when the object is dropped into the area
function eventCallBack(e){
alert('dropped') }
//Dragging props
var dragOpts = {
revert:true,
cursor:"move"
};
//Dropping props
var dropOpts = {
activeClass: "activated",
drop: eventCallBack
}
//Make element draggable
$("#drag").draggable(dragOpts);
//Make element droppable
$("#target").droppable(dropOpts);
}
);
// --></script>
Finally I create the object I’m gonna be dragging, and a container to “receive” my object, so the drag & drop will only return a call-back when the object is dropped inside my target
<div id="drag">Drag</div>
And that’s all I have to do to have a fully functional drag & drop using jQuery
