Draggable inside a particular div

asp.net, css, draggable, javascript, jquery

Solution

check the parent div boundary value for draggable element,If it satisfies the condition ,allow to move the element.

Try this code:

DEMO

 var boun=document.getElementById("parent").offsetWidth-document.getElementById("elem").offsetWidth;

 if((aX>0)&&(aX<boun)&&(aY>0)&&(aY<boun))
     tzdragg.move('elem',aX,aY);

Problem

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.... Fiddle

Original source