Author: F.antonov Date: 2007-03-13 06:05:46 -0400 (Tue, 13 Mar 2007) New Revision: 50 Modified: trunk/richfaces/common/src/main/resources/org/richfaces/renderkit/html/scripts/dnd/dnd-draggable.js Log: Fix for bug RFA-195. Modified: trunk/richfaces/common/src/main/resources/org/richfaces/renderkit/html/scripts/dnd/dnd-draggable.js =================================================================== --- trunk/richfaces/common/src/main/resources/org/richfaces/renderkit/html/scripts/dnd/dnd-draggable.js 2007-03-12 19:10:22 UTC (rev 49) +++ trunk/richfaces/common/src/main/resources/org/richfaces/renderkit/html/scripts/dnd/dnd-draggable.js 2007-03-13 10:05:46 UTC (rev 50) @@ -34,13 +34,26 @@ getOrCreateDefaultIndicator: function() { var dragDiv = $("_rfDefaultDragIndicator"); - if (!dragDiv) { + if (!dragDiv) { + dragDiv = document.createElement("div"); + dragDiv.id = "_rfDefaultDragIndicatorLeft"; + document.body.appendChild(dragDiv); + dragDiv = document.createElement("div"); + dragDiv.id = "_rfDefaultDragIndicatorRight"; + document.body.appendChild(dragDiv); + dragDiv = document.createElement("div"); + dragDiv.id = "_rfDefaultDragIndicatorBottom"; + Element.setStyle(dragDiv, {"font-size" : "0px"}); + document.body.appendChild(dragDiv); + dragDiv = document.createElement("div"); dragDiv.id = "_rfDefaultDragIndicator"; - Object.extend(dragDiv, DefaultDragIndicator); + Element.setStyle(dragDiv, {"font-size" : "0px"}); + Object.extend(dragDiv, DefaultDragIndicator); document.body.appendChild(dragDiv); } - Element.setStyle(dragDiv, {"border" : "1px dashed black"}); + DefaultDragIndicator.changeIndicatorColor(dragDiv, "black"); + return dragDiv; }, @@ -64,20 +77,24 @@ var type = this.getContentType(); var indicator = this.getIndicator(); var drag = new DnD.Drag(this, indicator, type); + + if (indicator.id.indexOf("_rfDefaultDragIndicator") != -1) { + var target = drag.source.getElement(); + var offSets = Position.cumulativeOffset(target); + indicator.indicatorWidth = Element.getWidth(target); + indicator.indicatorHeight = Element.getHeight(target); + indicator.position(offSets[0], offSets[1]); + indicator.removalX = Event.pointerX(event) - offSets[0]; + indicator.removalY = Event.pointerY(event) - offSets[1]; + } + DnD.startDrag(drag); DnD.updateDrag(event); this.ondragstart(event, drag); - if (indicator) { + if (indicator) { indicator.show(); - } + } -/* if (indicator.id.indexOf("_rfDefaultDragIndicator") != -1) { - Position.clone(Event.element(event), indicator); - var offSets = Position.cumulativeOffset(Event.element(event)); - indicator.removalX = Event.pointerX(event) - offSets[0]; - indicator.removalY = Event.pointerY(event) - offSets[1]; - } */ - if( this.options && this.options.ondragstart) { this.options.ondragstart(); } @@ -111,7 +128,7 @@ * @param {Object} drag */ ondragstart: function(event, drag) { - + }, ondragend: function (event, drag) { @@ -128,35 +145,102 @@ if (window.drag && window.drag.source) { var target = window.drag.source.getElement(); - Element.setStyle(this, {"width": Element.getWidth(target) + "px", "height": Element.getHeight(target) + "px"}); - + Element.setStyle(this, {"width": Element.getWidth(target) + "px", "height": "1px"}); Element.show(this); this.style.position = 'absolute'; + + var elt = $("_rfDefaultDragIndicatorLeft"); + if (elt) { + Element.setStyle(elt, {"width": "1px", "height": Element.getHeight(target) + "px"}); + Element.show(elt); + elt.style.position = 'absolute'; + } + elt = $("_rfDefaultDragIndicatorRight"); + if (elt) { + Element.setStyle(elt, {"width": "1px", "height": Element.getHeight(target) + "px"}); + Element.show(elt); + elt.style.position = 'absolute'; + } + elt = $("_rfDefaultDragIndicatorBottom"); + if (elt) { + Element.setStyle(elt, {"width": Element.getWidth(target) + "px", "height": "1px"}); + Element.show(elt); + elt.style.position = 'absolute'; + } } }, hide: function() { Element.hide(this); this.style.position = ''; + + var elt = $("_rfDefaultDragIndicatorLeft"); + if (elt) { + Element.hide(elt); + elt.style.position = ''; + } + elt = $("_rfDefaultDragIndicatorRight"); + if (elt) { + Element.hide(elt); + elt.style.position = ''; + } + elt = $("_rfDefaultDragIndicatorBottom"); + if (elt) { + Element.hide(elt); + elt.style.position = ''; + } }, position: function(x, y) { -/* if (this.id.indexOf("_rfDefaultDragIndicator") != -1 && this.removalX && this.removalY) { + if (this.removalX && this.removalY) { x -= (this.removalX + 5); y -= (this.removalY + 14); - } */ + } Element.setStyle(this, {"left": x + "px", "top": y + "px"}); + + var elt = $("_rfDefaultDragIndicatorLeft"); + if (elt) { + Element.setStyle(elt, {"left": x + "px", "top": y + "px"}); + } + x += this.indicatorWidth; + elt = $("_rfDefaultDragIndicatorRight"); + if (elt) { + Element.setStyle(elt, {"left": x + "px", "top": y + "px"}); + } + x -= this.indicatorWidth; + y += this.indicatorHeight; + elt = $("_rfDefaultDragIndicatorBottom"); + if (elt) { + Element.setStyle(elt, {"left": x + "px", "top": y + "px"}); + } }, accept: function() { - Element.setStyle(this, {"border" : "1px dashed green"}); + this.changeIndicatorColor(this, "green"); }, reject: function() { - Element.setStyle(this, {"border" : "1px dashed red"}); + this.changeIndicatorColor(this, "red"); }, leave: function() { - Element.setStyle(this, {"border" : "1px dashed black"}); + this.changeIndicatorColor(this, "black"); + }, + + changeIndicatorColor: function(indicator, color) { + Element.setStyle(indicator, {"border-top" : "1px dashed "+color}); + + var elt = $("_rfDefaultDragIndicatorLeft"); + if (elt) { + Element.setStyle(elt, {"border-left" : "1px dashed "+color}); + } + elt = $("_rfDefaultDragIndicatorRight"); + if (elt) { + Element.setStyle(elt, {"border-right" : "1px dashed "+color}); + } + elt = $("_rfDefaultDragIndicatorBottom"); + if (elt) { + Element.setStyle(elt, {"border-bottom" : "1px dashed "+color}); + } } };