createAndDrag_jquery-1.6.3.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>create an element and make it instantly draggable test</title>
  5. <style>
  6. .testDiv {
  7. width:5em;
  8. height:5em;
  9. background-color:red;
  10. border:1px solid #465;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <p>
  16. this works in all jQuery versions prior to 1.7.x. when you press the left mouse button,
  17. on the blue div below, it creates a div, makes it
  18. draggable, and delegates the mousedown event to it, which causes a drag to begin. then without
  19. letting go of the mouse button you can drag that div around.
  20. </p>
  21. <p><a href="createAndDrag_jquery-1.7.1.html">see the 1.7.1 version</a></p>
  22. <p>
  23. in 1.7.x, though, there's some stuff in the trigger method that causes it to fail. First
  24. there is the problem that it tests for e.isPropagationStopped(), which it is, of course,
  25. since we really want to consume the event. Second, it uses a regex called 'rfocusMorph'
  26. to determine which element to look for event handlers for, the result of which being that
  27. it decides to look on the parent of the element on which we need the event to fire! in the case
  28. of this page, that's the document body, which of course already has a mousedown handler. so if
  29. e.stopPropagation() is called, then you'd get into an infinite loop (except for the fact that
  30. it tests against e.isPropagationStopped(), which returns true, so it never tries to execute).
  31. </p>
  32. <p>the rfocusMorph regex looks like this:</p>
  33. <pre>rfocusMorph = /^(?:focusinfocus|focusoutblur)$/</pre>
  34. <p>at the point that it is called, our value is "mousedownmousedown", so it fails:</p>
  35. <pre>cur = rfocusMorph.test( bubbleType + type ) ? elem : elem.parentNode;</pre>
  36. <div id="workspace" style="background-color:blue;width:100%;height:40em"></div>
  37. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
  38. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  39. <script type="text/javascript">
  40. $(function() {
  41. $("#workspace").bind("mousedown", function(e) {
  42. var d = document.createElement("div");
  43. d.className = "testDiv";
  44. $("#workspace").append(d);
  45. var w = $(d).outerWidth(), h = $(d).outerHeight();
  46. $(d).offset({left:e.pageX - (w/2), top:e.pageY - (h/2)});
  47. $(d).draggable({
  48. stop:function() { alert("stopped!"); }
  49. });
  50. e.stopPropagation();
  51. //$(d).trigger(e);
  52. var h = jQuery._data(d, "handle");
  53. h(e);
  54. });
  55. });
  56. </script>
  57. </body>
  58. </html>