Site Sponsors:
Drag & Drop, HTML 5, and jQuery 
HTML5 has a lot to offer. From new tags to embedded media support & drawing on graphical canvases, much more is afoot than simply levelling the Web 2.0 playing field!

So it was as I was recently teaching a class on jQuery. While drag-and-drop is surely part of the HTML5 bag of tricks, jQuery's User Interface (UI) can load the AxtiveX and other plug-ins we need to make much of it work on older Browsers.

Here is the jQuery-UI.

Here is a nice jQuery / JavaScript example:

<!doctype html>

<html lang="en">
<meta charset="utf-8" />
<title>jQuery: Drag, Drop, &amp; Disable Example</title>
<script src="jquery-1.8.3.js"></script>
<script src="jquery-ui.js"></script>
#drag { background-color: #ff0000; cursor: move; width: 200px; height: 50px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#drop { background-color: #00ff00; cursor: pointer; width: 300px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
<!-- REF: -->
$(function() {
$( "#drag" ).draggable();
$( "#drop" ).droppable({
drop: function( event, ui ) {
$( this ).find( "p" ).html( "Welcome home ... " );
$( "#drag" ).html("Thanks!");

<div id="drag">
<p>Fly me into the green box</p>

<div id="drop" >
<p>Landing Zone!</p>





Add Comment
Comments are not available for this entry.