Hi Everyone

In my code i Used the following code to make div section draggable:

var DragHandler = {
// private property.
_oElem : null,

// public method. Attach drag handler to an element.
attach : function(oElem) {
oElem.onmousedown = DragHandler._dragBegin;
// callbacks
oElem.dragBegin = new Function();
oElem.drag = new Function();
oElem.dragEnd = new Function();

return oElem;
},
// private method. Begin drag process.
_dragBegin : function(e) {
var oElem = DragHandler._oElem = this;

if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }

var x = parseInt(oElem.style.left);
var y = parseInt(oElem.style.top);

e = e ? e : window.event;
oElem.mouseX = e.clientX;
oElem.mouseY = e.clientY;

oElem.dragBegin(oElem, x, y);

document.onmousemove = DragHandler._drag;
document.onmouseup = DragHandler._dragEnd;
return false;
},


// private method. Drag (move) element.
_drag : function(e) {
var oElem = DragHandler._oElem;

var x = parseInt(oElem.style.left);
var y = parseInt(oElem.style.top);

e = e ? e : window.event;
oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';

oElem.mouseX = e.clientX;
oElem.mouseY = e.clientY;

oElem.drag(oElem, x, y);

return false;
},


// private method. Stop drag process.
_dragEnd : function() {

var oElem = DragHandler._oElem;

var x = parseInt(oElem.style.left);
var y = parseInt(oElem.style.top);

oElem.dragEnd(oElem, x, y);

document.onmousemove = null;
document.onmouseup = null;
DragHandler._oElem = null;

}

};


Here is the block of code which invokes it :
<htm:div id="ctcpermission" onclick="DragHandler.attach(document.getElementById('rtform:form2: ctcpermission'))" style="position: absolute; left: 530px; top:420px; z-index: 20;">

.....
Header:
<htm:table >
<htm:tr>
<htm:td align="left" styleClass="darkbluesubbar">
<hutputText value="#{msg.isellForm_Opportunity_Contact_Permission}" styleClass="pr_bold_white" style="vertical-align: center,padding-left: 200px;"/>
</htm:td>
</htm:tr>
</htm:table>
lot of drop down menues are inside
.....
</htm:div>

Now the problem is if you have dragged the div, none of the dropboxes are selectable. Mouse appreantly stucks up with the drag activity only.

I thought of making the drag enabled on the click of header i.e. I wrapped the header code inside
<htm:div id="child" onclick="DragHandler.attach(document.getElementById('rtform:form2: ctcpermission'))" style="position: absolute;"> </htm:div>

Still I have same problem. I am really tired of trying here and there blindly now (my javascript knowledge is poor). Will appreciate a great deal if someone can give an insight into this.

Thanks in advance!