View Full Version : constrainTo problem?

28 Nov 2006, 12:01 PM
I am trying to use constrainTo and am not sure if it's a problem I am having or if it is a bug with constrainTo.

The code I am testing with is below. The draggable element 'child' will drag horizontally just fine, but when you drag it vertically it stops short of the bottom. The distance it stops short of the bottom of the element 'parent' is the distance from the top of the page to the top of 'parent'.

Shouldn't constrainTo take into account where the top of 'parent' is and the height of 'parent' rather than the top of the page and height of 'parent'.

I just did another test as well, by adding in:

<div style="width:100px; height:300px; float:left; background-color:blue;"></div>
above the DIV 'parent' and it appears to do the same thing with the left. It doesn't take into account the left position of 'parent' but rather the left side of the page. It's like constrainTo is using 0,0 rather than the top,left of the element that will constrain. So if your constraining element is not at 0,0 then when using constrainTo the "draggable area" will fall short by however far you are away from the top left of the page.

I hope I'm wrong, and if I am could someone point out what I am doing wrong. I've spent the past few hours playing with this trying different things and have not been successful in getting this to work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Drag and Drop</title>
<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/dragdrop-min.js"></script>
<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript" src="js/yui-ext-debug.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids-min.css">
<script type="text/javascript">
var dd = [];
var getEl = YAHOO.ext.Element.get;

window.onload = function () {
dd[0] = new YAHOO.util.DD('child');

dd[0].onDrag = function () {
var parentXY = YAHOO.util.Dom.getXY('parent');
var childXY = YAHOO.util.Dom.getXY('child');
var offsetXY = [childXY[0] - parentXY[0], childXY[1] - parentXY[1]];

document.getElementById('parentXY').innerHTML = "(" + parentXY[0] + ", " + parentXY[1] + ")"
document.getElementById('childXY').innerHTML = "(" + childXY[0] + ", " + childXY[1] + ")"
document.getElementById('offsetXY').innerHTML = "(" + offsetXY[0] + ", " + offsetXY[1] + ")"

<div id="parent" style="width:300px; height:300px; float:left; background-color:red;">
<div id="child" style="width:50px; height:50px; float:left; background-color:lime;">Drag Me</div>

Parent (X,Y): <span id="parentXY"></span>

Child (X,Y): <span id="childXY"></span>

Offset (X,Y): <span id="offsetXY"></span>

28 Nov 2006, 1:31 PM
Try this:

YAHOO.util.DragDrop.prototype.constrainTo = function(constrainTo, pad, inContent){
if(typeof pad == 'number'){
pad = {left: pad, right:pad, top:pad, bottom:pad};
pad = pad || this.defaultPadding;
var b = getEl(this.getEl()).getBox();
var ce = getEl(constrainTo);
var c = ce.dom == document.body ? { x: 0, y: 0,
width: YAHOO.util.Dom.getViewportWidth(),
height: YAHOO.util.Dom.getViewportHeight()} : ce.getBox(inContent || false);
var topSpace = b.y - c.y;
var leftSpace = b.x - c.x;

this.setXConstraint(leftSpace - (pad.left||0), // left
c.width - leftSpace - b.width - (pad.right||0) //right
this.setYConstraint(topSpace - (pad.top||0), //top
c.height - topSpace - b.height - (pad.bottom||0) //bottom

YMMV! :wink:

28 Nov 2006, 2:19 PM
Is this a fix for constrainTo or is constrainTo working properly it's just not what I am looking for?

Thanks for the code, I will try it out in a few minutes here.

edit: Your code makes it work perfect now.

28 Nov 2006, 4:24 PM
It was a bug in the code. Thanks Animal, I will apply that patch.