Author: ndkhoiits Date: 2010-10-28 06:08:10 -0400 (Thu, 28 Oct 2010) New Revision: 4868 Modified: portal/branches/branch-GTNPORTAL-1592/web/eXoResources/src/main/webapp/javascript/eXo/core/DragDrop.js portal/branches/branch-GTNPORTAL-1592/web/eXoResources/src/main/webapp/javascript/eXo/portal/PortalDragDrop.js Log: GTNPORTAL-1566 Fix some DnD problems, when edit layout Modified: portal/branches/branch-GTNPORTAL-1592/web/eXoResources/src/main/webapp/javascript/eXo/core/DragDrop.js =================================================================== --- portal/branches/branch-GTNPORTAL-1592/web/eXoResources/src/main/webapp/javascript/eXo/core/DragDrop.js 2010-10-28 08:28:45 UTC (rev 4867) +++ portal/branches/branch-GTNPORTAL-1592/web/eXoResources/src/main/webapp/javascript/eXo/core/DragDrop.js 2010-10-28 10:08:10 UTC (rev 4868) @@ -101,19 +101,20 @@ } ; DragDrop.prototype.onDrop = function(evt) { - /* should not remove this or move this line to destroy since the onMouseMove method keep calling */ - if(eXo.core.DragDrop.dropCallback != null) { - var dndEvent = eXo.core.DragDrop.dndEvent ; - dndEvent.backupMouseEvent = evt ; - var dragObject = dndEvent.dragObject ; + if(!evt) evt = window.event ; + /* should not remove this or move this line to destroy since the onMouseMove method keep calling */ + if(eXo.core.DragDrop.dropCallback != null) { + var dndEvent = eXo.core.DragDrop.dndEvent ; + dndEvent.backupMouseEvent = evt ; + var dragObject = dndEvent.dragObject ; - var foundTarget = eXo.core.DragDrop.findDropableTarget(dndEvent, eXo.core.DragDrop.dropableTargets, evt) ; - var junkMove = eXo.core.DragDrop.isJunkMove(dragObject, foundTarget) ; + var foundTarget = eXo.core.DragDrop.findDropableTarget(dndEvent, eXo.core.DragDrop.dropableTargets, evt) ; + var junkMove = eXo.core.DragDrop.isJunkMove(dragObject, foundTarget) ; - dndEvent.update(foundTarget, junkMove) ; - eXo.core.DragDrop.dropCallback (dndEvent) ; - } - eXo.core.DragDrop.destroy() ; + dndEvent.update(foundTarget, junkMove) ; + eXo.core.DragDrop.dropCallback (dndEvent) ; + } + eXo.core.DragDrop.destroy() ; } ; DragDrop.prototype.onCancel = function(evt) { Modified: portal/branches/branch-GTNPORTAL-1592/web/eXoResources/src/main/webapp/javascript/eXo/portal/PortalDragDrop.js =================================================================== --- portal/branches/branch-GTNPORTAL-1592/web/eXoResources/src/main/webapp/javascript/eXo/portal/PortalDragDrop.js 2010-10-28 08:28:45 UTC (rev 4867) +++ portal/branches/branch-GTNPORTAL-1592/web/eXoResources/src/main/webapp/javascript/eXo/portal/PortalDragDrop.js 2010-10-28 10:08:10 UTC (rev 4868) @@ -86,9 +86,12 @@ dndEvent.dragObject = cloneObject ; dndEvent.dragObject.isAddingNewly = isAddingNewly; } else { + var componentBlockWidth = 300; + previewBlock = PortalDragDrop.createPreview(); + previewBlock.style.height = dragObject.offsetHeight + "px"; dragObject.parentNode.insertBefore(previewBlock, dragObject); - dragObject.style.width = "300px"; + dragObject.style.width = componentBlockWidth + "px"; var componentBlock = eXo.core.DOMUtil.findFirstDescendantByClass(dragObject, "div", "UIComponentBlock") ; var editBlock = eXo.core.DOMUtil.findFirstChildByClass(componentBlock, "div", "EDITION-BLOCK"); if(editBlock) { @@ -99,10 +102,20 @@ dragObject.isAddingNewly = isAddingNewly; dragObject = dndEvent.dragObject; dragObject.style.position = "absolute" ; - if(eXo.core.I18n.isLT()) dragObject.style.left = originalDragObjectLeft + "px" ; - else dragObject.style.right = (PortalDragDrop.positionRootObj.offsetWidth - originalDragObjectLeft - dragObject.offsetWidth) + "px" ; dragObject.style.top = originalDragObjectTop + "px" ; + var dragObjectLeft = originalDragObjectLeft; + if (PortalDragDrop.deltaXDragObjectAndMouse > componentBlockWidth/2) { + if ((PortalDragDrop.backupDragObjectWidth - PortalDragDrop.deltaXDragObjectAndMouse) > componentBlockWidth/2) { + dragObjectLeft = originalDragObjectLeft + PortalDragDrop.deltaXDragObjectAndMouse - componentBlockWidth/2; + } else { + dragObjectLeft = originalDragObjectLeft + PortalDragDrop.backupDragObjectWidth - componentBlockWidth; + } + } + + if (eXo.core.I18n.isLT()) dragObject.style.left = dragObjectLeft + "px"; + else dragObject.style.right = PortalDragDrop.positionRootObj.offsetWidth - dragObject.offsetWidth - dragObjectLeft + "px"; + eXo.portal.isInDragging = true; } @@ -110,7 +123,14 @@ var dragObject = dndEvent.dragObject ; /* Control Scroll */ eXo.portal.PortalDragDrop.scrollOnDrag(dndEvent) ; - if(!dndEvent.foundTargetObject) return; + if(!dndEvent.foundTargetObject) { + if (!dndEvent.lastFoundTargetObject) { + return; + } else { + dndEvent.foundTargetObject = dndEvent.lastFoundTargetObject; + } + } + var uiComponentLayout ; if(dndEvent.foundTargetObject.className == "UIPage") { uiComponentLayout = DOMUtil.findFirstDescendantByClass(dndEvent.foundTargetObject, "div", "VIEW-PAGE"); @@ -149,7 +169,7 @@ } dndEvent.foundTargetObject.listComponentInTarget = listComponent ; - var insertPosition = eXo.portal.PortalDragDrop.findInsertPosition(listComponent, dragObject, "row") ; + var insertPosition = eXo.portal.PortalDragDrop.findInsertPosition(listComponent, "row", dndEvent.backupMouseEvent) ; dndEvent.foundTargetObject.foundIndex = insertPosition ; /* Insert preview block */ @@ -179,7 +199,7 @@ } dndEvent.foundTargetObject.listComponentInTarget = listComponent ; - var insertPosition = eXo.portal.PortalDragDrop.findInsertPosition(listComponent, dragObject, "column") ; + var insertPosition = eXo.portal.PortalDragDrop.findInsertPosition(listComponent, "column", dndEvent.backupMouseEvent) ; dndEvent.foundTargetObject.foundIndex = insertPosition ; /* Insert preview block */ @@ -203,11 +223,15 @@ hasChanged = false; } //When dragObject is outside - var targetElement = dndEvent.foundTargetObject; - if(!targetElement || targetElement.foundIndex == null) { - hasChanged = false; - } - //When dragobject is next to preview object (position is not changed) + if (!dndEvent.foundTargetObject) { + dndEvent.foundTargetObject = dndEvent.lastFoundTargetObject; + } + + var targetElement = dndEvent.foundTargetObject; + if(!targetElement || targetElement.foundIndex == null) { + hasChanged = false; + } + //When dragobject is next to preview object (position is not changed) if(!dndEvent.dragObject.isAddingNewly) { var DOMUtil = eXo.core.DOMUtil; var previewClass = "DragAndDropPreview"; @@ -229,7 +253,7 @@ } } - if(dndEvent.foundTargetObject != null || (dndEvent.backupMouseEvent && dndEvent.backupMouseEvent.keyCode != 27)) { + if(dndEvent.backupMouseEvent && dndEvent.backupMouseEvent.keyCode != 27) { eXo.portal.PortalDragDrop.doDropCallback(dndEvent) ; } else { if(dndEvent.dragObject.parentNode.nodeName.toLowerCase() == "td") { @@ -359,13 +383,18 @@ var mouseY = eXo.core.Browser.findMouseYInClient(dndEvent.backupMouseEvent) ; var deltaTop = mouseY - (Math.round(browserHeight * 5/6)) ; var deltaBottom = mouseY - (Math.round(browserHeight/6)) ; + var currentDragObjPos = parseInt(dndEvent.dragObject.style.top); if(deltaTop > 0) { - document.documentElement.scrollTop += deltaTop - 5 ; + document.documentElement.scrollTop += deltaTop - 5; + currentDragObjPos += deltaTop - 5; } if(deltaBottom < 0 && document.documentElement.scrollTop > 0) { document.documentElement.scrollTop += deltaBottom ; + currentDragObjPos += deltaBottom; } + + dndEvent.dragObject.style.top = currentDragObjPos + "px"; }; /** @@ -374,29 +403,29 @@ * * @param layout {string} the layout type which is "row" or "column" */ -PortalDragDrop.prototype.findInsertPosition = function(components, dragObject, layout) { - if(layout == "row") { - for(var i = 0; i < components.length; i++) { - var componentTop = eXo.core.Browser.findPosY(components[i]) ; - var dragObjectTop = eXo.core.Browser.findPosY(dragObject) ; - var componentMiddle = componentTop + Math.round(components[i].offsetHeight / 2) ; - - if(dragObjectTop > componentMiddle) continue ; - else return i; - } - return -1 ; - - } else { - var dragObjectX = eXo.core.Browser.findPosX(dragObject) ; - for(var i = 0; i < components.length; i++) { - var componentInTD = eXo.core.DOMUtil.getChildrenByTagName(components[i] ,"div")[0] ; - var componentX = eXo.core.Browser.findPosX(components[i]) ; +PortalDragDrop.prototype.findInsertPosition = function(components, layout, mouseEvent) { + var Browser = eXo.core.Browser; + if (layout == "row") { + for (var i = 0; i < components.length; i++) { + var componentTop = Browser.findPosY(components[i]); + var mouseYInPage = Browser.findMouseYInPage(mouseEvent); + var componentMIddle = componentTop + Math.round(components[i].offsetHeight / 2); + if (mouseYInPage > componentMIddle) continue; + else return i; + } - if(dragObjectX > componentX) continue ; - else return i ; - } - return -1 ; - } + return -1; + } else { + for (var i = 0; i < components.length; i++) { + var mouseXInPage = Browser.findMouseXInPage(mouseEvent); + var componentInTD = eXo.core.DOMUtil.getChildrenByTagName(components[i], "div")[0]; + var componentX = Browser.findPosX(components[i]); + if (mouseXInPage > componentX) continue; + else return i + } + + return -1 + } }; /**