HackToHell. Powered by Blogger.

Make a draggable element using jQuery !

jQuery is the best Java Scrip library on the planet and this is one of the many smart uses for it !

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
 

Share on Google Plus

About hacktohell

Love technology.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment