I am working on a project in which I have used draggable event. Now the thing is that draggable() event worked fine for me... But as I wanted to store my position I have used following javascript. This one is also working quit good... But the thing is that it will work for whole screen. I just wanted it to run on a specific parent div only by using this code. So is it possible ?
function $(el){
return document.getElementById(el);
}
var tzdragg = function(){
return {
move : function(divid,xpos,ypos){
var a = $(divid);
$(divid).style.left = xpos + 'px';
$(divid).style.top = ypos + 'px';
},
startMoving : function(evt){
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
a = $('elem'),
divTop = a.style.top,
divLeft = a.style.left;
divTop = divTop.replace('px','');
divLeft = divLeft.replace('px','');
var diffX = posX - divLeft,
diffY = posY - divTop;
document.onmousemove = function(evt){
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
aX = posX - diffX,
aY = posY - diffY;
tzdragg.move('elem',aX,aY);
}
},
stopMoving : function(){
var a = document.createElement('script');
document.onmousemove = function(){}
},
}
}();
if possible then please help me to sort this out...
i have made jsfiddle as well....
check the parent div boundary value for draggable element,If it satisfies the condition ,allow to move the element.
Try this code:
var boun=document.getElementById("parent").offsetWidth-document.getElementById("elem").offsetWidth;
if((aX>0)&&(aX<boun)&&(aY>0)&&(aY<boun))
tzdragg.move('elem',aX,aY);