snipplrCallback({"id":24431,"title":"jquery-live-and-draggable-event-with-elements-created-on-the-fly","source":"
  1. <?php \/* PHP code is CakePHP style, replace with regular html *\/<\/div><\/li>
  2. echo $javascript->link('ui\/ui.core.js', false);<\/div><\/li>
  3. echo $javascript->link('ui\/ui.draggable.js', false);<\/div><\/li>
  4. echo $javascript->link('ui\/ui.droppable.js', false);<\/div><\/li>
  5. ?><\/div><\/li>
  6.  <\/div><\/li>
  7. <<\/span>script type=<\/span>"text\/javascript"<\/span>><\/span><\/div><\/li>
  8. \tjQuery(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span><\/div><\/li>
  9.  <\/div><\/li>
  10. jQuery(<\/span>'.workout-event'<\/span>)<\/span>.live<\/span>(<\/span>"mouseover"<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span> <\/div><\/li>
  11. \tif<\/span> (<\/span>!<\/span>$(<\/span>this<\/span>)<\/span>.data<\/span>(<\/span>"init"<\/span>)<\/span>)<\/span> {<\/span> <\/div><\/li>
  12. \t\t$(<\/span>this<\/span>)<\/span>.data<\/span>(<\/span>"init"<\/span>,<\/span> true<\/span>)<\/span>;<\/span> <\/div><\/li>
  13. \t\tjQuery(<\/span>this<\/span>)<\/span>.draggable<\/span>(<\/span>{<\/span><\/div><\/li>
  14. \t\t\tcancel:<\/span> 'a.ui-icon'<\/span>,<\/span><\/div><\/li>
  15. \t\t\trevert:<\/span> 'invalid'<\/span>,<\/span><\/div><\/li>
  16. \t\t\tcontainment:<\/span> 'ul.calendar'<\/span>,<\/span><\/div><\/li>
  17. \t\t\thelper:<\/span> 'clone'<\/span>,<\/span><\/div><\/li>
  18. \t\t\tcursor:<\/span> 'move'<\/span><\/div><\/li>
  19. \t\t}<\/span>)<\/span>;<\/span><\/div><\/li>
  20. \t}<\/span><\/div><\/li>
  21. }<\/span>)<\/span>;<\/span><\/div><\/li>
  22.  <\/div><\/li>
  23. jQuery(<\/span>'.day-holder'<\/span>)<\/span>.droppable<\/span>(<\/span>{<\/span><\/div><\/li>
  24. \taccept:<\/span> '.workout-event'<\/span>,<\/span><\/div><\/li>
  25. \tactiveClass:<\/span> 'ui-state-highlight'<\/span>,<\/span><\/div><\/li>
  26. \tdrop:<\/span> function<\/span>(<\/span>ev,<\/span> ui)<\/span> {<\/span><\/div><\/li>
  27. \t\tdroppedWorkout(<\/span>ui.draggable<\/span>,<\/span>$(<\/span>this<\/span>)<\/span>)<\/span>;<\/span><\/div><\/li>
  28. \t}<\/span><\/div><\/li>
  29. }<\/span>)<\/span>;<\/span><\/div><\/li>
  30.  <\/div><\/li>
  31. var<\/span> url =<\/span> "<?php echo $html->url(array('action'=>'move'))?>"<\/span>;<\/span><\/div><\/li>
  32. function<\/span> droppedWorkout(<\/span>item,<\/span> target)<\/span> {<\/span><\/div><\/li>
  33. \tvar<\/span> query =<\/span> url +<\/span> '\/'<\/span> +<\/span> item.attr<\/span>(<\/span>'rel'<\/span>)<\/span> +<\/span> '\/'<\/span> +<\/span> target.attr<\/span>(<\/span>'title'<\/span>)<\/span>;<\/span><\/div><\/li>
  34.  <\/div><\/li>
  35. \tjQuery.getJSON<\/span>(<\/span>query,<\/span> function<\/span>(<\/span>data)<\/span>{<\/span><\/div><\/li>
  36. \t\titem.hide<\/span>(<\/span>)<\/span>;<\/span><\/div><\/li>
  37. \t\titem.appendTo<\/span>(<\/span>target.find<\/span>(<\/span>'.event-holder'<\/span>)<\/span>)<\/span>.fadeIn<\/span>(<\/span>)<\/span>;<\/span><\/div><\/li>
  38. \t}<\/span>)<\/span>;<\/span><\/div><\/li>
  39. }<\/span><\/div><\/li>
  40.  <\/div><\/li>
  41. }<\/span>)<\/span>;<\/span><\/div><\/li>
  42. <\/<\/span>script><\/span><\/div><\/li><\/ol><\/pre>","link":"https:\/\/snipplr.com\/view\/24431\/jquery-live-and-draggable-event-with-elements-created-on-the-fly"});