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

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

• javascript
• jquery
• asp
• css
• draggable

1 Answer 1

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);