Advanced Search

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

Expand | Embed | Plain Text

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.