View Full Version : [FEATREQ][3.0rc1] Ext.DD constrainTo does not take into account container borders

19 Apr 2009, 2:45 PM
The constrainTo method for Ext.DD does not take into account its containers borders. Thus, if the container has a border, you can drag an element over top of the border on the top and left sides, but on the bottom and right sides you are constrained X pixels from the edge where X is the width of the border.

Here is an example:

#test {
background: #FDFDFD;
border: 1px solid #D0D0D0;
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;

#container {
border: 3px solid red;
width: 650px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -325px;
margin-left: -250px;
<link rel="stylesheet" type="text/css" href="PATH_TO_EXT_ALL_CSS" />
<script type="text/javascript" src="PATH_TO_EXT_ALL"></script>
<script type="text/javascript">
Ext.onReady(function() {
var dragger = new Ext.dd.DD(Ext.get('test'));
dragger.startDrag = function() {
<div id="container">
<div id="test"></div>

By dragging the inner div to the edges, you can see it is offset 3px from the bottom and right because of the 3px border, while on the top and left it actually goes over top of the border.

I do not currently have a fix for this.

19 Apr 2009, 3:43 PM
The fix for this one looks pretty simple. I've only tested it within my use-case, however. There may be others I haven't considered.

Line 536 of DDCore.js is currently:

c = {x : xy[0]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};

it should be changed to

c = {x : xy[0]+s.left+ce.getBorderWidth('l'), y: xy[1]+s.top+ce.getBorderWidth('t'), width: cd.clientWidth, height: cd.clientHeight};

19 Apr 2009, 3:48 PM
it should be noted that my fix assumes that we don't want the border to be included in the allowable area. This is what I would expect.

I would suggest if you are thinking of making it otherwise, that it be a config parameter of some sort.