Drag and Drop jQuery | Lessoncup Programming Blog

Tuesday, 5 November 2013

Drag and Drop jQuery

Dragging and Dropping the elements using jQuery Ui library is very easy, the UI plugin makes an elements to be draggable simple say we can move the dom elements from one place to another place.



HTML

take a list of items to drag and give the id name to UL tag
<ul id="dragitem">
<li><img src="css3.jpg" width="180" height="150"></li>
<li><img src="html.jpg" width="180" height="150"></li>
<li><img src="js.jpg" width="180" height="150"></li>
</ul>

CSS

set the style to list elements to look better and take one more style .dragarea for placeholder, the placeholder property is  a part of  jQuery UI library, in DOM when we drag the elements the blank space will appear, we fill this blank area with a placeholder property, we apply a css class to this property that is .dragarea Class
<style>

.dragarea{ background-color:#F60; border:dashed #000 2px;}

ul{ list-style:none; margin:0; padding:0; margin-top:30px;}

li{ float:left; margin:32px; padding:5px; border:solid #666 5px;-webkit-box-shadow: 2px 2px 2px #666; width:180px;
box-shadow: 2px 2px 2px #666; width:180px; height:150px; background-color:#F7F7F7; cursor:pointer;}


</style>

JAVASCRIPT

include the jquery ui plugin along with common jquery library inside the head tag, now those elements you wish to make draggable in DOM, use that ID attribute as a selector and attach to sortable() method, after that add placeholder property inside the sortable() method and apply css style .dragarea class to this placeholder. 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="jquery-ui.js"></script>

<script>

  $(document).ready(function(){
   
    $( "#dragitem" ).sortable({placeholder:"dragarea"});
   
 
  });

</script>

Live Demo   Download Script

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons