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">
<head>
<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>
<style>
#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; }
</style>
<script>
<!-- REF: http://docs.jquery.com/UI/API/1.8/Droppable -->
$(function() {
$( "#drag" ).draggable();
$( "#drop" ).droppable({
drop: function( event, ui ) {
$( this ).find( "p" ).html( "Welcome home ... " );
$( "#drag" ).html("Thanks!");
this.disabled();
}
});
});
</script>
</head>
<body>

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

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


</body>
</html>



Cheers,

-Rn


[ add comment ] ( 2295 views )   |  permalink

<<First <Back | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | Next> Last>>