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


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.