jQuery - synchronous use of draggable, droppable and sortable


/ Published in: JavaScript
Save to your folder(s)

A little snippet which allows simultaneous use of jquery sortable, draggable and droppable on the same element


Copy this code and paste it in your HTML
  1. <script type="text/javascript">
  2. $(function(){
  3. addDraggableTo($('.weekplaner-task'));
  4. $('.weekplaner-daybox ul').droppable({}).sortable({
  5. revert: true,
  6. stop: function(e,ui){
  7. $(ui.item).attr('style','');
  8. addDraggableTo(ui.item)
  9. }
  10. });
  11. });
  12.  
  13. function addDraggableTo(sel){
  14. sel.draggable({ containment:'#weekplaner-wrapper',
  15. connectToSortable: '.weekplaner-daybox ul',
  16. opacity: 0.7,
  17. helper: function(){ return this }
  18. });
  19. }
  20. </script>
  21. <div id="weekplaner-wrapper">
  22. <?php for($i = 1; $i <= 5; $i++){ ?>
  23. <div class="weekplaner-daybox">
  24. <ul>
  25. <li class="weekplaner-task">remedia</li>
  26. <li class="weekplaner-task">remedia</li>
  27. </ul>
  28. </div>
  29. <?php } ?>
  30. <div class="clear"></div>
  31. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.