It uses the jQuery UI to display the draggable element ..
<!doctype html><html lang="en"><head><title>A Simple Draggable Element in jQuery - HackToHell</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><link rel="stylesheet" type="text/css" href="style.css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script><script type="text/javascript">$( init );function init() {$('#makeMeDraggable').draggable();}</script></head><body><div id="content" style="height: 400px;"><div id="makeMeDraggable"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs-gF-v4gLAnfj5NdMQGwoeoMw8tND7rjtBNEodSoR9o8fpVo566A3ykRxb3Pl7t28AzcdVKFSy5FXnzyMjqASQVs5oh79LsfFqR9XzO9ktIqOx4DBOij0A0numsHnQsm_s88QdhvrGzQ/s320/1Untitled+%2528Custom%2529.jpg" alt="HackToHell" title="HackToHell"> </div></div><div class="wideBox"><h1>Drag-and-Drop with jQuery: A Cool guide by hacktohell</h1><h2>A Simple Draggable Element My Logo , drag it around :) </h2></div></body></html>
Here the jQuery function ,
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable();
}
</script>Makes the element , makeMeDraggable draggable !
View the demo here !
http://dl.dropbox.com/u/12158677/hth/jQuery%20Slider.html
0 comments:
Post a Comment