Simple Jquery-Drag and Drop

 Drag & Drop behaviors and more with just a few lines or code. Interactions also make great building  blocks for more complex widgets and applications. 

 Index.html                                                                                                                                          Download Source Code
  1. <div id="center-wrapper"> <div id="dhe-article-info"> <div id="dhe-step-navigation"> <div class="dhe-clearer">&nbsp;</div> </div> </div> <div class="dhe-example-section" id="ex-1-3"> <div class="dhe-example-section-header"></div> <div class="dhe-example-section-content"> <!-- BEGIN: XHTML for example 1.3 --> <h2 style="color:red;">Jquery Drag and Drop</h2> <div id="example-1-3"> <div class="column left first"> <ul class="sortable-list"> <li class="sortable-item">Sortable item A</li> <li class="sortable-item">Sortable item B</li> <li class="sortable-item">Sortable item C</li> <li class="sortable-item">Sortable item D</li> <li class="sortable-item">Sortable item E</li> </ul> </div> <div class="column left"> <ul class="sortable-list"> </ul> </div> <div class="clearer">&nbsp;</div> </div><!-- END: XHTML for example 1.3 --> </div> </div> </div> <!-- Example JavaScript files --> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script> <!-- Example jQuery code (JavaScript) --> <script type="text/javascript"> $(document).ready(function(){ // Example 1.3: Sortable and connectable lists with visual helper $('#example-1-3 .sortable-list').sortable({ connectWith: '#example-1-3 .sortable-list', placeholder: 'placeholder', }); }); </script>

 Download Source Code

Next Post »