drag and drop between two divs using jquery ui

Tuesday

Jquery drag and drop sortable between different divs:
                                           In this tutorial I'm using jquery 1.4 2 min js and jquery-ui-1.8.13.min.js for drag and drop divs with image. In this simaple example you can Drag and drop items within a list and also Drag and drop items within and between lists of divs
                                           First download the requirement Jquey fils, you can download it from here or you can directly call from google.





Download jquery 1.4 2 min js

Downloadjquery-ui-1.8.13.min.js

Using the parameter connectWith (jQuery selector) we can define which other lists that items within a list can be dragged and dropped to. Add the following code into page load function.

<script>
$(document).ready(function () {
 $('.container .draggable-list').sortable({
 connectWith: '.container .draggable-list'
 });
});
</script>

then add that js reference to your page header tag

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

Then  copy and paste the following css in to your style region 

<style>
.container {
 width: 400px;
 background-color:#000000;
 border-bottom-color:#003366;
}
.draggable-list {
 background-color: #0066FF;
 list-style: none;
 margin: 0;
 min-height: 70px;
 padding: 10px;
}
.draggable-item {
 background-color: #FFF;
 border: 1px dotted #000;
 cursor: move;
 display: block;
 font-weight: bold;
 color:#CC0033;
 text-shadow: 5px 5px 5px #FF0000;
 padding-bottom:  70px;
 margin: 5px;
}
.img1 {
 width:76px;
 height: 62px;
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPR_z7HNH5_D5mL3iSnN3TKntSKvOpWrGXApaXvYRRgEViP9zN5X5hlXxt4JAbshSv4YOHSzyHFaXSfCZI1rKDU68JZm3PvonazswiGKHLGCwd-gbeFF5rpd0nquiDk07XylsVJRzlvaD/s1600/how+to+use+sprite+image.jpg') -3.5px -9px;
 float:left;
}
.img2 {
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPR_z7HNH5_D5mL3iSnN3TKntSKvOpWrGXApaXvYRRgEViP9zN5X5hlXxt4JAbshSv4YOHSzyHFaXSfCZI1rKDU68JZm3PvonazswiGKHLGCwd-gbeFF5rpd0nquiDk07XylsVJRzlvaD/s1600/how+to+use+sprite+image.jpg') -98px -7px;
 width: 70px;
 height: 66px;
 float:left;
}
.img3 {
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPR_z7HNH5_D5mL3iSnN3TKntSKvOpWrGXApaXvYRRgEViP9zN5X5hlXxt4JAbshSv4YOHSzyHFaXSfCZI1rKDU68JZm3PvonazswiGKHLGCwd-gbeFF5rpd0nquiDk07XylsVJRzlvaD/s1600/how+to+use+sprite+image.jpg') -198px -9px;
 width: 63px;
 height: 58px;
 float:left;
}

Finally add the draggable-list and draggable-item with in the container div.

<div class="container">
  <div class="draggable-list" style="float:left">
    <div class="draggable-item">
      <div class="img1"></div>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img2"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img3"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img5"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img6"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img4"></span>
      <p style="float:right"> Group A </p>
    </div>
  </div>
  <div class="draggable-list" style="float:right">
    <div class="draggable-item"> <span class="img7"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img8"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img9"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img10"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img11"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img12"></span>
      <p style="float:right"> Group B </p>
    </div>
  </div>
</div>

DemoDownload