createAndDrag_yui.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  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. <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/simpleyui/simpleyui-min.js"></script>
  16. <script type="text/javascript">
  17. var Y;
  18. YUI().use('node', 'dd', 'anim', 'node-event-simulate', function(_Y) {
  19. Y = _Y;
  20. Y.on("domready", function() {
  21. Y.one(document).on("mousedown", function(e) {
  22. var d = document.createElement("div");
  23. d.className = "testDiv";
  24. d.style.position = "absolute";
  25. document.body.appendChild(d);
  26. var n = Y.one(d)._node,
  27. w = n.offsetWidth, h = n.offsetHeight;
  28. d.style.left = (e.pageX - (w/2)) + "px";
  29. d.style.top = (e.pageY - (h/2)) + "px";
  30. var dd = new Y.DD.Drag({
  31. node:d
  32. });
  33. dd.on("drag:end", function() { alert("stopped!");});
  34. e.stopPropagation();
  35. Y.one(d).simulate("mousedown", {pageX:e.pageX, pageY:e.pageY, clientX:e.clientX, clientY:e.clientY});
  36. });
  37. });
  38. });
  39. </script>
  40. </body>
  41. </html>