/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */ /** * @class a YAHOO.util.DDProxy implementation that swaps positions with the * target when dropped * * @extends YAHOO.util.DDProxy * @constructor * @param {String} id the id of the linked element * @param {String} sGroup the group of related DragDrop items */ YAHOO.example.DDSwap = function(id, sGroup) { this.swapInit(id, sGroup); }; YAHOO.example.DDSwap.prototype = new YAHOO.util.DDProxy(); YAHOO.example.DDSwap.prototype.swapInit = function(id, sGroup) { if (!id) { return; } this.init(id, sGroup); this.initFrame(); this.logger = new ygLogger("DDSwap"); /** * css style to use when items are not being hovered over. */ this.offClass = "testSquare"; /** * css style to use when hovered over */ this.onClass = "testSquareOn"; /** * cache of the elements we have changed the style so we can restore it * later */ this.els = []; }; YAHOO.example.DDSwap.prototype.onDragDrop = function(e, id) { this.swap(this.getEl(), YAHOO.util.DDM.getElement(id)); }; YAHOO.example.DDSwap.prototype.swap = function(el1, el2) { this.logger.debug(this.id + " onDragDrop swap"); // Swap out the position of the two objects. This only works for absolutely // positioned elements. See for an implementation that // works for relatively positioned elements var s1 = el1.style; var s2 = el2.style; var l = s1.left; var t = s1.top; s1.left = s2.left; s1.top = s2.top; s2.left = l; s2.top = t; }; YAHOO.example.DDSwap.prototype.onDragEnter = function(e, id) { this.logger.debug(this.id + " dragEnter " + id); // store a ref so we can restore the style later this.els[id] = true; // set the mouseover style var el = YAHOO.util.DDM.getElement(id); if (el.className != this.onClass) { el.className = this.onClass; } }; YAHOO.example.DDSwap.prototype.onDragOut = function(e, id) { this.logger.debug(this.id + " dragOut " + id); // restore the style YAHOO.util.DDM.getElement(id).className = this.offClass; }; YAHOO.example.DDSwap.prototype.endDrag = function(e) { this.logger.debug(this.id + " endDrag"); this.resetStyles(); /* var el = this.getDragEl(); el.style.visibility = ""; // show the element first var position = [100, 100]; var duration = 0.4; var oAnim = new YAHOO.util.Motion( el, { points: { to: position } }, duration, YAHOO.util.Easing.easeOut ); oAnim.onComplete.subscribe( function() { el.style.visibility = "hidden" } ); */ }; YAHOO.example.DDSwap.prototype.resetStyles = function() { // restore all element styles for (var i in this.els) { var el = YAHOO.util.DDM.getElement(i); if (el) { el.className = this.offClass; } } }; YAHOO.example.DDSwap.prototype.onDrag = function(e) { }; YAHOO.example.DDSwap.prototype.onDragOver = function(e) { }; //------------------------------------------------------------------------- // Intersect mode //------------------------------------------------------------------------- YAHOO.example.DDSwap_i = function(id, sGroup) { this.swapInit(id, sGroup); }; YAHOO.example.DDSwap_i.prototype = new YAHOO.example.DDSwap(); YAHOO.example.DDSwap_i.prototype.onDragDrop = function(e, dds) { // this.logger.debug(this.id + " onDragDrop swap"); var dd = YAHOO.util.DDM.getBestMatch(dds); this.swap(this.getEl(), dd.getEl()); }; YAHOO.example.DDSwap_i.prototype.onDragEnter = function(e, dds) { }; YAHOO.example.DDSwap_i.prototype.onDragOver = function(e, dds) { // this.logger.debug(this.id + " dragEnter " + id); this.resetStyles(); var dd = YAHOO.util.DDM.getBestMatch(dds); this.els[dd.id] = true; // set the mouseover style var el = dd.getEl(); if (el.className != this.onClass) { el.className = this.onClass; } }; YAHOO.example.DDSwap_i.prototype.onDragOut = function(e, dds) { // this.logger.debug(this.id + " dragOut " + id); // restore the style for (var i=0; i