YUI Library JavaScript DHTML


            



    
Using Interaction Groups

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}






.slot { border:2px solid #aaaaaa; background-color:#dddddd; color:#666666; text-align:center; position: absolute; width:60px; height:60px; }
.player { border:2px solid #bbbbbb; color:#eeeeee; text-align:center; position: absolute; width:60px; height:60px; }
.target { border:2px solid #574188; background-color:#cccccc; text-align:center; position: absolute; width:60px; height:60px; }
#t1 { left: 10px; top: 0px; }
#t2 { left: 378px; top: 0px; }
#b1 { left: 84px; top: 50px; }
#b2 { left: 158px; top: 50px; }
#b3 { left: 232px; top: 50px; }
#b4 { left: 306px; top: 50px; }
#pt1 { background-color:#7E695E; left: 84px; top: 150px; }
#pt2 { background-color:#7E695E; left: 84px; top: 230px; }
#pb1 { background-color:#416153; left: 195px; top: 150px; }
#pb2 { background-color:#416153; left: 195px; top: 230px; }
#pboth1 { background-color:#552E37; left: 306px; top: 150px; }
#pboth2 { background-color:#552E37; left: 306px; top: 230px; }
#usercontrols {
    top: -36px;
}
#workarea {
    position: relative;
    height: 300px;
}




Using Interaction Groups


  Using interaction groups, this example demonstrates how to 
tie into the Drag & Drop Utility's interesting moments to provide visual 
affordances for the current drag operation.




Interaction Mode:

  Point
  Intersect


2
3
4
5
6
1
2
3
4
5
6


(function() {
YAHOO.example.DDPlayer = function(id, sGroup, config) {
    YAHOO.example.DDPlayer.superclass.constructor.apply(this, arguments);
    this.initPlayer(id, sGroup, config);
};
YAHOO.extend(YAHOO.example.DDPlayer, YAHOO.util.DDProxy, {
    TYPE: "DDPlayer",
    initPlayer: function(id, sGroup, config) {
        if (!id) { 
            return; 
        }
        var el = this.getDragEl()
        YAHOO.util.Dom.setStyle(el, "borderColor", "transparent");
        YAHOO.util.Dom.setStyle(el, "opacity", 0.76);
        // specify that this is not currently a drop target
        this.isTarget = false;
        this.originalStyles = [];
        this.type = YAHOO.example.DDPlayer.TYPE;
        this.slot = null;
        this.startPos = YAHOO.util.Dom.getXY( this.getEl() );
        YAHOO.log(id + " startpos: " + this.startPos, "info", "example");
    },
    startDrag: function(x, y) {
        YAHOO.log(this.id + " startDrag", "info", "example");
        var Dom = YAHOO.util.Dom;
        var dragEl = this.getDragEl();
        var clickEl = this.getEl();
        dragEl.innerHTML = clickEl.innerHTML;
        dragEl.className = clickEl.className;
        Dom.setStyle(dragEl, "color",  Dom.getStyle(clickEl, "color"));
        Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
        Dom.setStyle(clickEl, "opacity", 0.1);
        var targets = YAHOO.util.DDM.getRelated(this, true);
        YAHOO.log(targets.length + " targets", "info", "example");
        for (var i=0; i            
            var targetEl = this.getTargetDomRef(targets[i]);
            if (!this.originalStyles[targetEl.id]) {
                this.originalStyles[targetEl.id] = targetEl.className;
            }
            targetEl.className = "target";
        }
    },
    getTargetDomRef: function(oDD) {
        if (oDD.player) {
            return oDD.player.getEl();
        } else {
            return oDD.getEl();
        }
    },
    endDrag: function(e) {
        // reset the linked element styles
        YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 1);
        this.resetTargets();
    },
    resetTargets: function() {
        // reset the target styles
        var targets = YAHOO.util.DDM.getRelated(this, true);
        for (var i=0; i            var targetEl = this.getTargetDomRef(targets[i]);
            var oldStyle = this.originalStyles[targetEl.id];
            if (oldStyle) {
                targetEl.className = oldStyle;
            }
        }
    },
    onDragDrop: function(e, id) {
        // get the drag and drop object that was targeted
        var oDD;
        
        if ("string" == typeof id) {
            oDD = YAHOO.util.DDM.getDDById(id);
        } else {
            oDD = YAHOO.util.DDM.getBestMatch(id);
        }
        var el = this.getEl();
        // check if the slot has a player in it already
        if (oDD.player) {
            // check if the dragged player was already in a slot
            if (this.slot) {
                // check to see if the player that is already in the
                // slot can go to the slot the dragged player is in
                // YAHOO.util.DDM.isLegalTarget is a new method
                if ( YAHOO.util.DDM.isLegalTarget(oDD.player, this.slot) ) {
                    YAHOO.log("swapping player positions", "info", "example");
                    YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
                    this.slot.player = oDD.player;
                    oDD.player.slot = this.slot;
                } else {
                    YAHOO.log("moving player in slot back to start", "info", "example");
                    YAHOO.util.Dom.setXY(oDD.player.getEl(), oDD.player.startPos);
                    this.slot.player = null;
                    oDD.player.slot = null
                }
            } else {
                // the player in the slot will be moved to the dragged
                // players start position
                oDD.player.slot = null;
                YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
            }
        } else {
            // Move the player into the emply slot
            // I may be moving off a slot so I need to clear the player ref
            if (this.slot) {
                this.slot.player = null;
            }
        }
        YAHOO.util.DDM.moveToEl(el, oDD.getEl());
        this.resetTargets();
        this.slot = oDD;
        this.slot.player = this;
    },
    swap: function(el1, el2) {
        var Dom = YAHOO.util.Dom;
        var pos1 = Dom.getXY(el1);
        var pos2 = Dom.getXY(el2);
        Dom.setXY(el1, pos2);
        Dom.setXY(el2, pos1);
    },
    onDragOver: function(e, id) {
    },
    onDrag: function(e, id) {
    }
});
var slots = [], players = [],
    Event = YAHOO.util.Event, DDM = YAHOO.util.DDM;
Event.onDOMReady(function() { 
    // slots
    slots[0] = new YAHOO.util.DDTarget("t1", "topslots");
    slots[1] = new YAHOO.util.DDTarget("t2", "topslots");
    slots[2] = new YAHOO.util.DDTarget("b1", "bottomslots");
    slots[3] = new YAHOO.util.DDTarget("b2", "bottomslots");
    slots[4] = new YAHOO.util.DDTarget("b3", "bottomslots");
    slots[5] = new YAHOO.util.DDTarget("b4", "bottomslots");
    
    // players
    players[0] = new YAHOO.example.DDPlayer("pt1", "topslots");
    players[1] = new YAHOO.example.DDPlayer("pt2", "topslots");
    players[2] = new YAHOO.example.DDPlayer("pb1", "bottomslots");
    players[3] = new YAHOO.example.DDPlayer("pb2", "bottomslots");
    players[4] = new YAHOO.example.DDPlayer("pboth1", "topslots");
    players[4].addToGroup("bottomslots");
    players[5] = new YAHOO.example.DDPlayer("pboth2", "topslots");
    players[5].addToGroup("bottomslots");
    DDM.mode = document.getElementById("ddmode").selectedIndex;
    Event.on("ddmode", "change", function(e) {
            YAHOO.util.DDM.mode = this.selectedIndex;
        });
});
})();





   
   
yui_2.7.0b.zip( 4,431 k)