Ticket #6285: low_level_draggable_droppable_like_scriptaculous.patch

dojo/dnd/Mover.js

@@ -39 +39 @@
                 this.host.onMove(this, {l: m.l + e.pageX, t: m.t + e.pageY});
         },
         onMouseUp: function(e){
+        this.e = e;
                 if(this.mouseButton == e.button){
                         this.destroy();
                 }

dojo/dnd/Droppable.js

@@ +1 @@
+if(!dojo._hasResource["dojo.dnd.Droppable"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojo.dnd.Droppable"] = true;
+dojo.provide("dojo.dnd.Droppable");
+
+dojo.declare("dojo.dnd.DroppableManager", null, {
+    _drops: [],
+    constructor: function() {
+    },
+    add: function(/*DOMNode|string*/id, /*Object*/params) {
+        // summary: register a node (id) in droppable manager to make an 
+        //          element react when a Draggable is droped onto it.
+        //
+        // id: DOM id or DOM Node 
+        // params: Object, a dict of parameters, recognized parameters are:
+        //     hoverclass: String
+        //          if set, the Droppable node will have this additional CSS 
+        //          class when an accepted Draggable is hovered over it.
+        //     greedy: Boolean (default: true)
+        //          if true stops processing hovering (don’t look for other
+        //          Droppables that are under the Draggable)
+        //     onOver: Function
+        //          called whenever a Draggable is moved over the Droppable 
+        //          and the Droppable is affected (would accept it). The 
+        //          callback gets two parameters: the Draggable, the Droppable element.
+        //     onDrop: Function
+        //          called whenever a Draggable is released over the Droppable
+        //          and the Droppable is accepts it. The callback gets three
+        //          parameters: the Draggable element, the Droppable element
+        //          and the Event. You can extract additional information about
+        //          the drop – like if the Ctrl or Shift keys were 
+        //          pressed – from the Event object.
+        if (!params) { params = {}; }
+        if (params.greedy == undefined) params.greedy = true;
+        var new_record = {
+            element: dojo.byId(id),
+            hoverclass: params.hoverclass || null,
+            greedy: params.greedy,
+            onOver: params.onOver || null,
+            onDrop: params.onDrop || null
+        }
+
+        this._drops.push(new_record);
+    },
+    remove: function(/*DOMNode|string*/ id) {
+        // summary: remove a node (id) from droppable manager.
+        //
+        // id: DOM id or DOM Node
+        var element_to_remove = dojo.byId(id);
+        this._drops = dojo.filter(this._drops, function(item){ return item.element!=element_to_remove });
+    },
+    reset: function() {
+        // TODO
+    },
+    onOver: function(/*Event*/event, /*DOMNode*/draggable_element, dont_call_callback) {
+        // summary: called whenever a Draggable element move. This method
+        //          go in search of Droppable element in DroppableManager.
+        //          If matched onOver event function is called on element found.
+        //      
+        // event: mouse event
+        // draggable_element: DOM Node dragged
+        // dont_call_callback: if true then don't call onOver callback
+        // return dropped element found
+        var dropped = this._findTarget(event.x, event.y, draggable_element);
+        if ((dont_call_callback != true) && (dropped != null)) {
+            if (dropped.onOver != null) {
+                dropped.onOver(event, draggable_element)
+            }
+        }
+        return dropped;
+    },
+    onDrop: function(/*Event*/event, /*DOMNode*/draggable_element, dont_call_callback) {
+        // summary: called whenever a Draggable element is dropped. This method
+        //          go in search of Droppable element in DroppableManager.
+        //          If matched onDrop event function is called on element found.
+        //
+        // event: mouse event
+        // draggable_element: DOM Node dragged
+        // dont_call_callback: if true then don't call onDrop callback
+        // return dropped element found
+        var dropped = this._findTarget(event.x, event.y, draggable_element);
+        if ((dont_call_callback != true) && (dropped != null)) {
+            if (dropped.onDrop != null) {
+                dropped.onDrop(event, draggable_element)
+            }
+        }
+        return dropped;
+    },
+    _findTarget: function(/*integer*/x, /*integer*/ y, skip_element) {
+        // summary: this method look for DOM Node droppable in _drops array
+        //          which is contain x, y 
+        // return: droppable element or null
+        for(var i = 0;i < this._drops.length;i++) {
+            if (this._drops[i].element == skip_element) continue;
+            if (dojo.within(this._drops[i].element, x, y))
+                return this._drops[i];
+        }
+        return null;
+    }
+});
+
+dojo.dnd._droppables = null;
+
+dojo.dnd.droppables = function() {
+    if (!dojo.dnd._droppables) {
+        dojo.dnd._droppables = new dojo.dnd.DroppableManager();
+    }
+    return dojo.dnd._droppables;
+};
+
+} // _hasResource

dojo/dnd/Draggable.js

@@ +1 @@
+if(!dojo._hasResource["dojo.dnd.Draggable"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojo.dnd.Draggable"] = true;
+dojo.provide("dojo.dnd.Draggable");
+
+dojo.require("dojo.dnd.Moveable");
+dojo.require("dojo.dnd.Droppable");
+
+dojo.declare("dojo.dnd.Draggable", dojo.dnd.Moveable, {
+    constructor: function(node, params) {
+        // summary: an object, which makes a node draggable
+        // node: Node: a node (or node's id) to be draggable
+        // params: Object: an optional object with additional parameters;
+        //  following parameters are recognized:
+        //      handle: Node: a node (or node's id), which is used as a mouse handle
+        //          if omitted, the node itself is user a a handle
+        //      delay: Number: delay move by this number of pixels
+        //      revert: Boolean: If set to true, the element returns to its original
+        //          position when the drags ends. False by default.
+        //      zindex: Number: The css zindex of the draggable item. 1000 by default.
+        //      constraint: String: f set to ‘horizontal’ or ‘vertical’ the drag will 
+        //          be constrained to take place only horizontally or vertically.
+        //      ghosting: Boolean: Clones the element and drags the clone, 
+        //          leaving the original in place until the clone is dropped.
+        //      onStart: Function: Called when a drag is initiated.
+        //      onDrag: Function: Called repeatedly a mouse moves, if mouse position 
+        //          changed from previous call.
+        //      onEnd: Function: Called when a drag is ended.
+        if (!params) { params = {}; }
+        this.ghosting = params.ghosting ? params.ghosting : false;
+        this.revert = params.revert ? params.revert : false;
+    },
+    getAvatar: function() {
+        this._backup_box = dojo.marginBox(this.node);
+        if (this.ghosting) {
+            var clone = this.node.cloneNode(true);    
+            clone.id = clone.id + "clone";
+            clone.style.visibility = "hidden";
+            clone.style.position = "absolute";
+            this.node.parentNode.insertBefore(clone, this.node);
+            return clone;
+        } else {
+            this._backup_style_position = this.node.style.position;
+            this._backup_style_left = this.node.style.left;
+            this._backup_style_top = this.node.style.top;
+            return this.node;
+        }
+    },
+        // mouse event processors
+        onMouseDown: function(e){
+                // summary: event processor for onmousedown, creates a Mover for the node
+                // e: Event: mouse event
+                if(this.skip && dojo.dnd.isFormElement(e)){ return; }
+                if(this.delay){
+            //console.log("delay");
+                        this.events.push(dojo.connect(this.handle, "onmousemove", this, "onMouseMove"));
+                        this.events.push(dojo.connect(this.handle, "onmouseup", this, "onMouseUp"));
+                        this._lastX = e.pageX;
+                        this._lastY = e.pageY;
+                }else{
+            //console.log("onMouseDown");
+            //console.dir(e);
+                        new this.mover(this.getAvatar(), e, this);
+            //console.log("apres");
+                }
+                dojo.stopEvent(e);
+        },
+        onMouseMove: function(e){
+                // summary: event processor for onmousemove, used only for delayed drags
+                // e: Event: mouse event
+                if(Math.abs(e.pageX - this._lastX) > this.delay || Math.abs(e.pageY - this._lastY) > this.delay){
+                        this.onMouseUp(e);
+                        new this.mover(this.getAvatar(), e, this);
+            dojo.dnd.droppables.onOver(e, this.node);
+                }
+                dojo.stopEvent(e);
+        },
+        onMouseUp: function(e){
+                // summary: event processor for onmouseup, used only for delayed delayed drags
+                // e: Event: mouse event
+                dojo.disconnect(this.events.pop());
+                dojo.disconnect(this.events.pop());
+        },
+        onMoveStart: function(/* dojo.dnd.Mover */ mover){
+                // summary: called before every move operation
+                dojo.publish("/dnd/move/start", [mover]);
+                dojo.addClass(dojo.body(), "dojoMove"); 
+                dojo.addClass(mover.node, "dojoMoveItem"); 
+        },
+        onMoveStop: function(/* dojo.dnd.Mover */ mover){
+                // summary: called after every move operation
+        //mover.node.parentNode.removeChild(mover.node);
+        //this.inherited(arguments);
+        var droppable = dojo.dnd.droppables();
+        var dropped = droppable.onDrop({x: mover.e.pageX, y: mover.e.pageY}, this.node);
+        if (this.ghosting) {
+            if ((this.revert) && (dropped == null)) {
+                dojo.require("dojox.fx");
+                var actual_box = dojo.marginBox(mover.node);
+                var actual_box = dojo.marginBox(mover.node);
+                var clone = mover.node;
+                dojox.fx.slideBy({ 
+                    node: mover.node, 
+                    top: this._backup_box.t - actual_box.t, 
+                    left: this._backup_box.l - actual_box.l, 
+                    duration:200, 
+                    onEnd: function() { clone.parentNode.removeChild(clone); }
+                }).play();
+            } else mover.node.parentNode.removeChild(mover.node);
+        } else {
+            if ((this.revert) && (dropped == null)) {
+                dojo.require("dojox.fx");
+                var actual_box = dojo.marginBox(mover.node);
+                dojox.fx.slideBy({ 
+                    node: mover.node, 
+                    top: this._backup_box.t - actual_box.t, 
+                    left: this._backup_box.l - actual_box.l, 
+                    duration:600, 
+                    onEnd: dojo.hitch(this, "_removeNodeModification", mover.node)
+                }).play();
+            } else this._removeNodeModification(mover.node);
+            
+        }
+        },
+    _removeNodeModification: function(node) {
+        node.style.left = this._backup_style_left;
+        node.style.top = this._backup_style_top;
+        node.style.position = this._backup_style_position;
+        if (node.style.length == 0)
+            node.removeAttribute("style");
+        
+        dojo.removeClass(node, "dojoMoveItem");
+
+        if (node.getAttribute("class") == "")
+            node.removeAttribute("class");
+    },
+    onFirstMove: function(/* dojo.dnd.Mover */ mover) {
+        if (mover.node.style.visibility == "hidden")
+            mover.node.style.visibility = "visible";
+    },
+        onMoved: function(/* dojo.dnd.Mover */ mover, /* Object */ leftTop){
+        var droppable = dojo.dnd.droppables();
+        
+        droppable.onOver({x: leftTop.l - mover.marginBox.l, y: leftTop.t - mover.marginBox.t}, mover.node);
+        }
+});
+
+}

dojo/tests/dnd/test_droppable.html

@@ +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+        "http://www.w3.org/TR/html4/strict.dtd">
+<!--
+        we use a strict-mode DTD to ensure that the box model is the same for these
+        basic tests
+-->
+<html>
+<head>
+    <title>testing Dojo DnD Droppable</title>
+
+        <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
+
+        <script type="text/javascript" src="../../dnd/Draggable.js"></script>
+        <script type="text/javascript" src="../../dnd/Droppable.js"></script>
+    <script type="text/javascript">
+        dojo.require("doh.runner");
+
+        var element1_state = "";
+        var element2_state = "";
+        var element3_state = "";
+        var element4_state = "";
+
+        function resetTableStates()
+        {
+            dojo.byId("element1_state").innerHTML = "-";
+            dojo.byId("element2_state").innerHTML = "-";
+            dojo.byId("element3_state").innerHTML = "-";
+            dojo.byId("element4_state").innerHTML = "-";
+        }
+
+        function updatePositionElement()
+        {
+            for(i = 1 ; i < 5 ; i++) {
+                x1 = dojo.byId("element_" + i).offsetLeft;
+                y1 = dojo.byId("element_" + i).offsetTop;
+                x2 = dojo.byId("element_" + i).offsetLeft + dojo.byId("element_" + i).offsetWidth;
+                y2 = dojo.byId("element_" + i).offsetTop + dojo.byId("element_" + i).offsetHeight;
+
+                dojo.byId("element" + i + "_x1y1x2y2").innerHTML = x1 + "," + y1 + "," + x2 + "," + y2;
+            }
+        }
+
+        dojo.addOnLoad(function() { updatePositionElement() });
+
+        dojo.declare("TestDroppableManager", dojo.dnd.DroppableManager, {
+            onOver: function(/*Event*/event, /*DOMNode*/draggable_element) {
+                updatePositionElement();
+                dojo.byId("onover_event_x").innerHTML = event.x;
+                dojo.byId("onover_event_y").innerHTML = event.y;
+                if (draggable_element != undefined)
+                    dojo.byId("onover_draggable_id").innerHTML = draggable_element.id;
+
+                return this.inherited(arguments);
+            },
+            onDrop: function(/*Event*/event, /*DOMNode*/draggable_element) {
+                updatePositionElement();
+                dojo.byId("ondrop_event_x").innerHTML = event.x;
+                dojo.byId("ondrop_event_y").innerHTML = event.y;
+                if (draggable_element != undefined)
+                    dojo.byId("ondrop_draggable_id").innerHTML = draggable_element.id;
+
+                return this.inherited(arguments);
+            }
+        });
+
+        dojo.dnd.droppables = function() {
+            if (!dojo.dnd._droppables) {
+                dojo.dnd._droppables = new TestDroppableManager();
+            }
+            return dojo.dnd._droppables;
+        };
+
+        dojo.addOnLoad(function(){
+            doh.register("t", 
+                [
+                    function testAdd(t) {
+                        var droppables = dojo.dnd.droppables();
+                        // Add element 1 with no parameter
+                        droppables.add("element_1");
+
+                        // Add element 2
+                        droppables.add(
+                            dojo.byId("element_2"),
+                            {
+                                hoverclass: "droppable",
+                                greedy: false,
+                                onOver: function(event, draggable_element) {
+                                    element2_state = "onOver";
+                                    resetTableStates();
+                                    dojo.byId("element2_state").innerHTML = "onOver";
+                                    console.log("onOver element2");
+                                },
+                                onDrop: function(event, draggable_element) {
+                                    element2_state = "onDrop";
+                                    resetTableStates();
+                                    dojo.byId("element2_state").innerHTML = "onDrop";
+                                    console.log("onDrop element2");
+                                }
+                            }
+                        );
+
+                        // Add element 3
+                        droppables.add("element_3");
+
+                        // Add element 4
+                        droppables.add(
+                            "element_4",
+                            {
+                                onOver: function(event, draggable_element) {
+                                    element4_state = "onOver";
+                                    resetTableStates();
+                                    dojo.byId("element4_state").innerHTML = "onOver";
+                                    console.log("onOver element4");
+                                },
+                                onDrop: function(event, draggable_element) {
+                                    element4_state = "onDrop";
+                                    resetTableStates();
+                                    dojo.byId("element4_state").innerHTML = "onDrop";
+                                    console.log("onDrop element4");
+                                }
+                            }
+                        );
+
+                        // First droppable element added
+                        t.is(dojo.byId("element_1"), droppables._drops[0].element);
+                        t.is(null, droppables._drops[0].hoverclass);
+                        t.is(true, droppables._drops[0].greedy);
+                        t.is(null, droppables._drops[0].onOver);
+                        t.is(null, droppables._drops[0].onDrop);
+
+                        // Second droppable element added
+                        t.is(dojo.byId("element_2"), droppables._drops[1].element);
+                        t.is("droppable", droppables._drops[1].hoverclass);
+                        t.is(false, droppables._drops[1].greedy);
+                        t.isnot(null, droppables._drops[1].onOver);
+                        t.isnot(null, droppables._drops[1].onDrop);
+
+                        // ...
+                        t.is(dojo.byId("element_3"), droppables._drops[2].element);
+                        t.is(dojo.byId("element_4"), droppables._drops[3].element);
+                    },
+                    function testRemove(t) {
+                        var droppables = dojo.dnd.droppables();
+
+                        droppables.remove("element_3");
+                        t.is(dojo.byId("element_1"), droppables._drops[0].element);
+                        t.is(dojo.byId("element_2"), droppables._drops[1].element);
+                        t.is(dojo.byId("element_4"), droppables._drops[2].element);
+                    },
+                    function testFindTarget(t) {
+                        var droppables = dojo.dnd.droppables();
+
+                        t.is(
+                            dojo.byId("element_1"), 
+                            droppables._findTarget(
+                                dojo.byId("element_1").offsetLeft + 2, // x
+                                dojo.byId("element_1").offsetTop + 2   // y
+                            ).element
+                        );
+
+
+                        t.is(
+                            dojo.byId("element_2"), 
+                            droppables._findTarget(
+                                dojo.byId("element_2").offsetLeft + 2, // x
+                                dojo.byId("element_2").offsetTop + 2   // y
+                            ).element
+                        );
+
+                        t.is(
+                            null,
+                            droppables._findTarget(
+                                dojo.byId("element_3").offsetLeft + 2, // x
+                                dojo.byId("element_3").offsetTop + 2   // y
+                            )
+                        );
+
+                        t.is(
+                            dojo.byId("element_4"),
+                            droppables._findTarget(
+                                dojo.byId("element_4").offsetLeft + 2, // x
+                                dojo.byId("element_4").offsetTop + 2   // y
+                            ).element
+                        );
+                    },
+                    function testOnOverAndOnDrop(t) {
+                        var droppables = dojo.dnd.droppables();
+
+                        // Add element previously deleted
+                        droppables.add(
+                            "element_3",
+                            {
+                                onOver: function(event, draggable_element) {
+                                    element3_state = "onOver";
+                                    resetTableStates();
+                                    dojo.byId("element3_state").innerHTML = "onOver";
+                                    console.log("onOver element3");
+                                },
+                                onDrop: function(event, draggable_element) {
+                                    element3_state = "onDrop";
+                                    resetTableStates();
+                                    dojo.byId("element3_state").innerHTML = "onDrop";
+                                    console.log("onDrop element3");
+                                }
+                            }
+                        );
+
+                        // Test onOver element 2
+                        event = {
+                            x: dojo.byId("element_2").offsetLeft + 2,
+                            y: dojo.byId("element_2").offsetTop + 2
+                        }
+                        element2_state = "";
+                        droppables.onOver(event, undefined);
+                        t.is(element2_state, "onOver");
+
+                        // Test onDrop element 2
+                        droppables.onDrop(event, undefined);
+                        t.is(element2_state, "onDrop");
+
+                        // Test onOver element 3
+                        event = {
+                            x: dojo.byId("element_3").offsetLeft + 2,
+                            y: dojo.byId("element_3").offsetTop + 2
+                        }
+                        element3_state = "";
+                        droppables.onOver(event, undefined);
+                        t.is(element3_state, "onOver");
+                        
+                        // Test onDrop element 3
+                        droppables.onDrop(event, undefined);
+                        t.is(element3_state, "onDrop");
+
+                        // Test onOver element 4
+                        event = {
+                            x: dojo.byId("element_4").offsetLeft + 2,
+                            y: dojo.byId("element_4").offsetTop + 2
+                        }
+                        element4_state = "";
+                        droppables.onOver(event, undefined);
+                        t.is(element4_state, "onOver");
+
+                        // Test onDrop element 4
+                        droppables.onDrop(event, undefined);
+                        t.is(element4_state, "onDrop");
+                    }
+                ]
+            );
+            doh.run();
+        });
+
+        dojo.addOnLoad(function() {
+            var drag1 = new dojo.dnd.Draggable("element_1");
+            var drag2 = new dojo.dnd.Draggable("element_2", {ghosting: true});
+            var drag3 = new dojo.dnd.Draggable("element_3", {revert: true});
+            var drag4 = new dojo.dnd.Draggable("element_4", {ghosting: true, revert: true});
+        });
+    </script>
+</head>
+<body>
+    <h1>Dojo Dnd Droppable</h1>
+    
+    <table border="1" cellspacing="0">
+        <tr>
+            <th>&nbsp;</th>
+            <th>Element 1</th>
+            <th>Element 2</th>
+            <th>Element 3</th>
+            <th>Element 4</th>
+        </tr>
+        <tr>
+            <th>State</th>
+            <td style="text-align:center" id="element1_state">-</td>
+            <td style="text-align:center" id="element2_state">-</td>
+            <td style="text-align:center" id="element3_state">-</td>
+            <td style="text-align:center" id="element4_state">-</td>
+        </tr>
+        <tr>
+            <th>x1,y1,x2,y2</th>
+            <td style="text-align:center" id="element1_x1y1x2y2">-</td>
+            <td style="text-align:center" id="element2_x1y1x2y2">-</td>
+            <td style="text-align:center" id="element3_x1y1x2y2">-</td>
+            <td style="text-align:center" id="element4_x1y1x2y2">-</td>
+        </tr>
+    </table>
+    <br />
+    <table border="1" cellspacing="0">
+        <tr>
+            <th>&nbsp;</th>
+            <th>event.x</th>
+            <th>event.y</th>
+            <th>draggable_element.id</th>
+        </tr>
+        <tr>
+            <th>onOver</th>
+            <td style="text-align:center" id="onover_event_x">-</td>
+            <td style="text-align:center" id="onover_event_y">-</td>
+            <td style="text-align:center" id="onover_draggable_id">-</td>
+        </tr>
+        <tr>
+            <th>onDrop</th>
+            <td style="text-align:center" id="ondrop_event_x">-</td>
+            <td style="text-align:center" id="ondrop_event_y">-</td>
+            <td style="text-align:center" id="ondrop_draggable_id">-</td>
+        </tr>
+    </table>
+
+    <p id="element_1">Element 1</p>
+    <p id="element_2">Element 2</p>
+    <p id="element_3">Element 3</p>
+    <p style="height:60em">Big space</p>
+    <p id="element_4">Element 4 <span id="subelement4">other element in element4</span></p>
+</body>
+</html>

dojo/tests/dnd/test_draggable.html

@@ +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+        "http://www.w3.org/TR/html4/strict.dtd">
+<!--
+        we use a strict-mode DTD to ensure that the box model is the same for these
+        basic tests
+-->
+<html>
+<head>
+    <title>testing Dojo DnD Draggable</title>
+
+        <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
+
+        <script type="text/javascript" src="../../dnd/Draggable.js"></script>
+        <script type="text/javascript" src="../../dnd/Droppable.js"></script>
+    <script type="text/javascript">
+        dojo.require("doh.runner");
+
+        dojo.addOnLoad(function() {
+            var drag1 = new dojo.dnd.Draggable("element_1");
+            var drag2 = new dojo.dnd.Draggable("element_2", {ghosting: true});
+            var drag3 = new dojo.dnd.Draggable("element_3", {revert: true});
+            var drag4 = new dojo.dnd.Draggable("element_4", {ghosting: true, revert: true});
+        });
+    </script>
+</head>
+<body>
+    <h1>testing Dojo DnD Draggable</h1>
+
+    <p id="element_1">Element 1</p>
+    <p id="element_2">Element 2</p>
+    <p id="element_3">Element 3</p>
+    <p id="element_4">Element 4</p>
+</body>
+</html>