createAndDrag_mootools.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  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://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
  16. <script type="text/javascript" src="../../js/lib/mootools-1.3.2.1-more.js"></script> <script type="text/javascript">
  17. window.addEvent('domready', function() {
  18. $(document).addEvent("mousedown", function(e) {
  19. var d = document.createElement("div");
  20. d.className = "testDiv";
  21. d.style.position = "absolute";
  22. document.body.appendChild(d);
  23. var s = $(d).getSize(), w = s.x, h = s.y,
  24. o = $(d).getPosition();
  25. $(d).setPosition({x:e.event.pageX - (w/2), y:e.event.pageY - (h/2)});
  26. new Drag.Move($(d), {
  27. onComplete:function() { alert("stopped!"); }
  28. });
  29. e.stopPropagation();
  30. $(d).fireEvent("mousedown", e);
  31. });
  32. });
  33. </script>
  34. </body>
  35. </html>