Hello,
I'm starting with YUI, and while playing a bit with the Drag & Drop module, I came to find this strange behavior involving an element with two associated D&Ds. I just want to know if I made a mistake or if it really wasn't supposed to happen this way. My code is based on the
resizable panel example. Here it goes:
<body>
<style>
#a {
position:absolute;
left:50px;
top:50px;
border: 1px solid;
width: 150px;
height: 150px;
background-color:yellow;
}
#b {
height: 30px;
border: 1px solid;
background-color:green;
cursor: move;
}
#c {
position: absolute;
bottom: -1px;
right: -1px;
height: 10px;
width: 10px;
border: 1px solid;
background-color:red;
cursor: se-resize;
}
</style>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
<script>
YAHOO.example.DDResize = function(panelElId, handleElId, sGroup, config) {
YAHOO.example.DDResize.superclass.constructor.call(this, panelElId, sGroup, config);
if (handleElId) {
this.setHandleElId(handleElId);
}
};
YAHOO.extend(YAHOO.example.DDResize, YAHOO.util.DragDrop, {
onMouseDown: function(e) {
var panel = this.getEl();
this.startWidth = panel.offsetWidth;
this.startHeight = panel.offsetHeight;
this.startPos = [YAHOO.util.Event.getPageX(e),
YAHOO.util.Event.getPageY(e)];
},
onDrag: function(e) {
var newPos = [YAHOO.util.Event.getPageX(e),
YAHOO.util.Event.getPageY(e)];
var offsetX = newPos[0] - this.startPos[0];
var offsetY = newPos[1] - this.startPos[1];
var newWidth = Math.max(this.startWidth + offsetX, 10);
var newHeight = Math.max(this.startHeight + offsetY, 10);
var panel = this.getEl();
panel.style.width = newWidth + "px";
panel.style.height = newHeight + "px";
}
});
YAHOO.util.Event.onDOMReady(function() {
var dd1 = new YAHOO.util.DD('a', 'move');
dd1.setHandleElId('b');
var dd2 = new YAHOO.example.DDResize('a', 'c', 'resize');
});
</script>
</body>
Here's the situation: the only difference between the example and my code is that 'b' is stated as the handle for 'dd1'. This doesn't work as I think it should, because on Firefox 2 both 'b' and 'c' act as handles for resizing, and on IE7, they both act as handles for dragging. If I switch 'dd1' and 'dd2' instantiations on code, the respective behaviors are switched between browsers. Adding the following line makes this code work for one of the browsers, but not both (but I guess adding it shouldn't have any effect if the code behaved as expected):
dd1.addInvalidHandleId(c);
Any help is much appreciated.
Having problems with message search?
Fill out this form to ensure your group is one of the first to be migrated to the new message search system.
Offline 
Send Email