Advanced Search

JQuery Live and draggable event with elements created on the fly

/ Published in: jQuery
Save to your folder(s)
PHP code is CakePHP style, replace with regular html

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <?php /* PHP code is CakePHP style, replace with regular html */
  2. echo $javascript->link('ui/ui.core.js', false);
  3. echo $javascript->link('ui/ui.draggable.js', false);
  4. echo $javascript->link('ui/ui.droppable.js', false);
  5. ?>
  6.  
  7. <script type="text/javascript">
  8. 	jQuery(document).ready(function(){
  9.  
  10. jQuery('.workout-event').live("mouseover", function() { 
  11. 	if (!$(this).data("init")) { 
  12. 		$(this).data("init", true); 
  13. 		jQuery(this).draggable({
  14. 			cancel: 'a.ui-icon',
  15. 			revert: 'invalid',
  16. 			containment: 'ul.calendar',
  17. 			helper: 'clone',
  18. 			cursor: 'move'
  19. 		});
  20. 	}
  21. });
  22.  
  23. jQuery('.day-holder').droppable({
  24. 	accept: '.workout-event',
  25. 	activeClass: 'ui-state-highlight',
  26. 	drop: function(ev, ui) {
  27. 		droppedWorkout(ui.draggable,$(this));
  28. 	}
  29. });
  30.  
  31. var url = "<?php echo $html->url(array('action'=>'move'))?>";
  32. function droppedWorkout(item, target) {
  33. 	var query = url + '/' + item.attr('rel') + '/' + target.attr('title');
  34.  
  35. 	jQuery.getJSON(query, function(data){
  36. 		item.hide();
  37. 		item.appendTo(target.find('.event-holder')).fadeIn();
  38. 	});
  39. }
  40.  
  41. });
  42. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.