I experienced the same issue in Kentico 8 when using a Flow layout design.
(using css properties float:left;clear:both;width:100%;position:relative;)
Drag and drop was not working, because - on drag - the position of the webpart/widget moved relative ~200px to right-bottom.
I managed to fix the issue by letting jQuery resolve the offset. (Instead of the .Net Framework javascript)
Functions that DO NOT work correctly (in this case):
Sys.UI.DomElement.getLocation(element, ...)
Sys.UI.DomElement.setLocation(element, x, y)
Functions that DO work:
jQuery(element).offset()
jQuery(element).offset({ left: x, top: y })
(First create a backup of your file)
Step 1. In file \CMSScripts\DragAndDrop\DragAndDropBehavior.js, add the following on top:
/* Get/Set Location Fix */
function getLocation(element) {
var offset = jQuery(element).offset();
return { x: offset.left, y: offset.top };
}
function setLocation(element, x, y) {
jQuery(element).offset({ left: x, top: y });
}
/* End of Get/Set Location Fix */
Step 2.
Uncomment every line containing: 'Sys.UI.DomElement.getLocation', like:
... = /*Sys.UI.DomElement.*/getLocation(...);
Step 3.
Uncomment every line containing: 'Sys.UI.DomElement.setLocation', like:
/*Sys.UI.DomElement.*/setLocation(...);
Step 4. Save the file, and Reload the javascript (by using CTRL-F5 and/or CMS Application restart)
OPTIONAL:
My DesignMode CSS changes: (Added to my Site.css, NOT REQUIRED FOR THE FIX ABOVE, but completes the flow layout and gives the webpart components the correct height)
.WebPartZone, .WebPartZoneContent {float: left; clear:both; width: 100%; position:relative; }
.WebPartZoneBorder, .WebPartZoneBorderActive { float:left; clear:both;width:100%; }
.WebPartBorder, .WebPartBorderActive { float:left; clear:both;width:100%; }
.WebPartContent {float: left; clear:both; width: 100%;}
.EditorWidget div.WebPartHeader {display:block; /*height:31px;background-color:blue;*/}
.WebPart { /*margin: 10px 0;*/ float: left; clear:both; width: 100%; }
.WebPartZoneCue { margin:-3px; border:3px dotted red; border-radius:10px; float: left; clear:both; width: 100%; }