mootoolsdragdroptest.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>mootools drag/drop test</title>
  5. <style type="text/css">
  6. .aDiv { width:5em; height:5em; border:1px solid red; position:absolute;}
  7. #div1 { left:20em;top:5em; }
  8. #div2 { left:5em;top:15em; }
  9. #div3 { left:35em;top:5em; }
  10. #div4 { left:35em;top:15em; }
  11. .hover { border: 1px dotted blue; }
  12. </style>
  13. </head>
  14. <body>
  15. <div id="div1" class="aDiv">div one</div>
  16. <div id="div2" class="aDiv">div two</div>
  17. <div id="div3" class="aDiv">div three</div>
  18. <div id="div4" class="aDiv">div four</div>
  19. <div id="div5" class="aDiv">div five</div>
  20. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
  21. <script type="text/javascript" src="../js/mootools-1.2.4.4-more.js"></script>
  22. <script type="text/javascript">
  23. window.addEvent('domready', function() {
  24. var hoverClass="hover";
  25. var _droppables = {};
  26. var _draggables = {};
  27. /*var _find = function(mainList, filterFunc) {
  28. var result = [];
  29. if (mainList) {
  30. for (var i = 0; i < mainList.length; i++) {
  31. if (!filterFunc(mainList[i]))
  32. result.push(mainList[i]);
  33. }
  34. }
  35. return result;
  36. };*/
  37. var _add = function(mainList, scope, el) {
  38. var l = mainList[scope];
  39. if (!l) {
  40. l = [];
  41. mainList[scope] = l;
  42. }
  43. l.push(el);
  44. };
  45. var initDroppable = function(el, scope) {
  46. _add(_droppables, scope, el);
  47. var filterFunc = function(entry) {
  48. return entry.element != el;
  49. };
  50. //var draggables = _find(_draggables[scope], filterFunc);
  51. var draggables = _draggables[scope] ? _draggables[scope].filter(filterFunc) : [];
  52. for (var i = 0; i < draggables.length; i++)
  53. draggables[i].droppables.push(el);
  54. };
  55. var initDraggable = function(target, scope) {
  56. var filterFunc = function(entry) {
  57. return entry.get("id") != target.get("id");
  58. };
  59. var d = _droppables[scope] ? _droppables[scope].filter(filterFunc) : [];
  60. var drag = new Drag.Move(target,
  61. {
  62. droppables:d,
  63. onDrop: function(el, dr) {
  64. if (dr) {
  65. alert("dropped " + el.get("id") + " on " + dr.get("id"));
  66. }
  67. },
  68. onLeave: function(el, dr) {
  69. if (dr) dr.removeClass(hoverClass);
  70. },
  71. onEnter: function(el, dr) {
  72. if (dr) dr.addClass(hoverClass);//dr.setStyle('border', '1px solid blue');
  73. }
  74. });
  75. _add(_draggables, scope, drag);
  76. };
  77. initDroppable($("div1"), 'scope1');
  78. initDroppable($("div2"), 'scope1');
  79. initDroppable($("div3"), 'scope2');
  80. initDraggable($("div1"), 'scope1');
  81. initDraggable($("div2"), 'scope1');
  82. initDraggable($("div4"), 'scope2');
  83. initDraggable($("div3"), 'scope2');
  84. // note we have not yet inited div4 as a droppable. doing that here will
  85. // not result in anyone being able to drop on it, as they're already been initialised
  86. // we need to fix that.
  87. initDroppable($("div4"), 'scope2');
  88. // now let's do a whole new element - draggable AND droppable.
  89. // windows 3 and 4 should be able to interact with this
  90. initDraggable($("div5"), 'scope2');
  91. initDroppable($("div5"), 'scope2');
  92. });
  93. </script>
  94. </body>
  95. </html>