createAndDrag_jquery-1.7.1.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  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. in 1.7.x you have to release
  20. the mouse button and then click back on the newly created element on order to start a drag.
  21. </p>
  22. <p><a href="createAndDrag_jquery-1.6.3.html">see the 1.6.3 version</a></p>
  23. <p>
  24. in 1.7.x, though, there's some stuff in the trigger method that causes it to fail. First
  25. there is the problem that it tests for e.isPropagationStopped(), which it is, of course,
  26. since we really want to consume the event. Second, it uses a regex called 'rfocusMorph'
  27. to determine which element to look for event handlers for, the result of which being that
  28. it decides to look on the parent of the element on which we need the event to fire! in the case
  29. of this page, that's the document body, which of course already has a mousedown handler. so if
  30. e.stopPropagation() is called, then you'd get into an infinite loop (except for the fact that
  31. it tests against e.isPropagationStopped(), which returns true, so it never tries to execute).
  32. </p>
  33. <p>the rfocusMorph regex looks like this:</p>
  34. <pre>rfocusMorph = /^(?:focusinfocus|focusoutblur)$/</pre>
  35. <p>at the point that it is called, our value is "mousedownmousedown", so it fails:</p>
  36. <pre>cur = rfocusMorph.test( bubbleType + type ) ? elem : elem.parentNode;</pre>
  37. <p>The rFocusMorph regex looks to be basically wrong</p>
  38. <div id="workspace" style="background-color:blue;width:100%;height:40em"></div>
  39. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  40. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  41. <script type="text/javascript">
  42. $(function() {
  43. $("#workspace").bind("mousedown", function(e) {
  44. var d = document.createElement("div");
  45. d.className = "testDiv";
  46. $("#workspace").append(d);
  47. var w = $(d).outerWidth(), h = $(d).outerHeight();
  48. $(d).offset({left:e.pageX - (w/2), top:e.pageY - (h/2)});
  49. $(d).draggable({
  50. stop:function() { alert("stopped!"); }
  51. });
  52. // this is how it would be nice to trigger the mousedown
  53. // e.stopPropagation();
  54. //$(d).trigger(e);
  55. // and this is a way of triggering the mousedown that works.
  56. var h = jQuery._data(d, "handle");
  57. h(e);
  58. });
  59. });
  60. </script>
  61. </body>
  62. </html>