123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- <!doctype html>
- <html>
- <head>
- <title>mootools drag/drop test</title>
- <style type="text/css">
- .aDiv { width:5em; height:5em; border:1px solid red; position:absolute;}
- #div1 { left:20em;top:5em; }
- #div2 { left:5em;top:15em; }
- #div3 { left:35em;top:5em; }
- #div4 { left:35em;top:15em; }
-
- .hover { border: 1px dotted blue; }
- </style>
- </head>
- <body>
-
- <div id="div1" class="aDiv">div one</div>
- <div id="div2" class="aDiv">div two</div>
- <div id="div3" class="aDiv">div three</div>
- <div id="div4" class="aDiv">div four</div>
-
- <div id="div5" class="aDiv">div five</div>
-
-
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
- <script type="text/javascript" src="../js/mootools-1.2.4.4-more.js"></script>
- <script type="text/javascript">
- window.addEvent('domready', function() {
-
- var hoverClass="hover";
- var _droppables = {};
- var _draggables = {};
- /*var _find = function(mainList, filterFunc) {
- var result = [];
- if (mainList) {
- for (var i = 0; i < mainList.length; i++) {
- if (!filterFunc(mainList[i]))
- result.push(mainList[i]);
- }
- }
- return result;
- };*/
- var _add = function(mainList, scope, el) {
- var l = mainList[scope];
- if (!l) {
- l = [];
- mainList[scope] = l;
- }
- l.push(el);
- };
- var initDroppable = function(el, scope) {
- _add(_droppables, scope, el);
- var filterFunc = function(entry) {
- return entry.element != el;
- };
- //var draggables = _find(_draggables[scope], filterFunc);
- var draggables = _draggables[scope] ? _draggables[scope].filter(filterFunc) : [];
- for (var i = 0; i < draggables.length; i++)
- draggables[i].droppables.push(el);
- };
- var initDraggable = function(target, scope) {
- var filterFunc = function(entry) {
- return entry.get("id") != target.get("id");
- };
- var d = _droppables[scope] ? _droppables[scope].filter(filterFunc) : [];
- var drag = new Drag.Move(target,
- {
- droppables:d,
- onDrop: function(el, dr) {
- if (dr) {
- alert("dropped " + el.get("id") + " on " + dr.get("id"));
- }
- },
- onLeave: function(el, dr) {
- if (dr) dr.removeClass(hoverClass);
- },
- onEnter: function(el, dr) {
- if (dr) dr.addClass(hoverClass);//dr.setStyle('border', '1px solid blue');
- }
- });
- _add(_draggables, scope, drag);
- };
- initDroppable($("div1"), 'scope1');
- initDroppable($("div2"), 'scope1');
- initDroppable($("div3"), 'scope2');
-
- initDraggable($("div1"), 'scope1');
- initDraggable($("div2"), 'scope1');
- initDraggable($("div4"), 'scope2');
- initDraggable($("div3"), 'scope2');
- // note we have not yet inited div4 as a droppable. doing that here will
- // not result in anyone being able to drop on it, as they're already been initialised
- // we need to fix that.
- initDroppable($("div4"), 'scope2');
- // now let's do a whole new element - draggable AND droppable.
- // windows 3 and 4 should be able to interact with this
- initDraggable($("div5"), 'scope2');
- initDroppable($("div5"), 'scope2');
- });
- </script>
- </body>
- </html>
|