Draggable div(for iOS and Android) restricted inside another div

**AlexUK** · 05-16-2016, 02:06 PM

Hi all!

I'm looking for a way to make a div draggable on mobile, restricted inside another div and will store/report back the x and y value inside variables

Any idea how?

Thanks alot in advance and for reading!

**Sempervivum** · 05-16-2016, 09:28 PM

What do you mean:

restricted inside another div

Should the dragabble div not be moved outside the other div?

**AlexUK** · 05-17-2016, 04:01 AM

Originally Posted by Sempervivum

What do you mean:Should the dragabble div not be moved outside the other div?

Restricted(limited) inside the div means the draggable div can only move inside the div

**Sempervivum** · 05-17-2016, 09:14 AM

Some time ago I found this script which does the dragging:
Cross-browser drag and drop - CodeProject
and created a runnable demo:

Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test Drag&Drop</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .Dragable
            {
               cursor:move;
               -moz-user-select: -moz-none;   
               -khtml-user-select: none;   
               -webkit-user-select: none;   
               -o-user-select: none;   
               user-select: none;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            var oDragItem = null;
            var iClickOffsetX = 0;
            var iClickOffsetY = 0;
            
            function MakeDragable(id){
                var oBox = $(id);
                oBox.className = "Dragable";
            
                if (navigator.platform=="iPad"){
                    oBox.ontouchstart= function(e){TouchStart(e)};
                    oBox.ontouchmove=function(e){TouchMove(e)};
                }else{
                    oBox.onmousemove= function(e){DragMove(oBox,e)};
                    oBox.onmouseup=function(e){DragStop(oBox,e)};
                    oBox.onmousedown=function(e){DragStart(oBox,e);return false};	
                }	
            }
            
            function TouchStart(e){
                var oPos = GetObjPos(e.target);
                iClickOffsetX = e.targetTouches[0].pageX - oPos.x;
                iClickOffsetY = e.targetTouches[0].pageY - oPos.y;
            }
            
            function DragStart(o,e){
                if(!e) var e = window.event;
                oDragItem = o;
            
                if (e.offsetX){
                    iClickOffsetX = e.offsetX;
                    iClickOffsetY = e.offsetY;	
                }else{
                    var oPos = GetObjPos(o);
                    iClickOffsetX = e.clientX - oPos.x;
                    iClickOffsetY = e.clientY - oPos.y;
                }
            
                if (o.setCapture){
                    o.setCapture();
                }else{
                    window.addEventListener ("mousemove", DragMove2, true);
                    window.addEventListener ("mouseup",   DragStop2, true);
                }
            }
            
            function DragMove2(e){
                DragMove(oDragItem,e);
            }
            
            function DragStop2(e){
                DragStop(oDragItem,e);
            }
            
            function DragMove(o,e){
                if (oDragItem==null) return;
            
                if(!e) var e = window.event;
                var x = e.clientX + document.body.scrollLeft - document.body.clientLeft - iClickOffsetX;
                var y = e.clientY + document.body.scrollTop  - document.body.clientTop - iClickOffsetY;
            
                oDragItem.style.zIndex = 1000;
                oDragItem.style.position="absolute";
                oDragItem.style.left=x + "px";
                oDragItem.style.top=y + "px";
            }
            
            function TouchMove(e){
                e.preventDefault();
                var curX = e.targetTouches[0].pageX - iClickOffsetX;
                var curY = e.targetTouches[0].pageY - iClickOffsetY; 
            
                var o = e.targetTouches[0].target;
                o.style.position = "absolute";
                o.style.top  = curY + 'px'; 
                o.style.left = curX + 'px'; 
            }
            
            function DragStop(o,e){
                if (oDragItem==null) return;
            
                if (o.releaseCapture){
                    o.releaseCapture();
                }else if (oDragItem){
                    window.removeEventListener ("mousemove", DragMove2, true);
                    window.removeEventListener ("mouseup",   DragStop2, true);
                }
            
                oDragItem.style.zIndex = 1;
                oDragItem = null;
            }
            
            function $(s){
                return document.getElementById(s);
            }
            
            function GetObjPos(obj){
                var x = 0;
                var y = 0;
            
                var w = obj.offsetWidth;
                var h = obj.offsetHeight;
                if (obj.offsetParent) {
                    x = obj.offsetLeft
                    y = obj.offsetTop
                    while (obj = obj.offsetParent){
                        x += obj.offsetLeft;
                        y += obj.offsetTop;
                    }
                }
                return {x:x, y:y, w:w, h:h};
            }
        </script>
    </head>
    <body>
        <div id="dragble" style="width: 100px; height: 100px; background-color: red;"></div>
        <script>
            MakeDragable("dragble");
        </script>
    </body>
</html>

AFAIK it supports touch devices too.
What's missing is the limitation to the surrounding container. Try to add this. If you do not succeed come back.

Thread: Draggable div(for iOS and Android) restricted inside another div

Thread Tools

Rate This Thread

Draggable div(for iOS and Android) restricted inside another div

Tags for this Thread

Posting Permissions