Home/ Questions/Q 8079341
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T16:04:18+00:00

I had created one div window which is draggable,and created one child div (with

  • 0

I had created one div window which is draggable,and created one child div (with in the window div) which is scrollable.Those work individually fine,but when I am trying to scroll the inner div by clicking on up and down arrow of scroll, the drag event is triggered once scrolling has been finished.I am not able to solve the issue….Any suggestions please…

Here is the code…

<!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <TITLE> Reporting</TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style>
    body{
    font-family:Arial,Helvetica,sans-serif;
    font-size:0.7em;
    }
    .Object{
    width:190px;
    height:100px;
    border:1px solid black;
    border-radius:7px 7px 7px 7px;
    box-shadow:3px 3px 2px #D2D2D2;
    position:absolute;
    resize:
    }

    .ObjHdr{
     color:#fff;
     background:#363636; 
     padding:3px 0px 3px 7px;
     border-radius:6px 6px 0px 0px;;
     font-weight:bold;
     cursor:move;
    }

    .ObjBody{
     width:190px;
     height:77px;
     overflow:scroll;
    }

    .ObjEle{
     padding:1px 0px 1px 4px;
     color:#000;
     border-bottom:1px solid black;
     cursor:pointer;
    }

    </style>

    </HEAD>
    <BODY>

     <div id="ObjCountry" class="Object">
       <div class="ObjHdr">Country</div>
       <div id =sd class="ObjBody" unselectable="on">
        <div class="ObjEle">India</div>
        <div class="ObjEle">China</div>
        <div class="ObjEle">USA</div>
        <div class="ObjEle">Iran</div>
        <div class="ObjEle">Iraq</div>
        <div class="ObjEle">Indonesia</div>
       </div>
     </div>

    </BODY>
    </HTML>

    <script>

    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;
            oElem.onmousemove = DragHandler._drag;
            oElem.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;

            var tmpX = x + (e.clientX - oElem.mouseX);
            var tmpY = y + (e.clientY - oElem.mouseY);

            if(tmpX<=0){tmpX = 0;}
            if(tmpY<=0){tmpY = 0;}


            oElem.style.left = tmpX + 'px';
            oElem.style.top  = tmpY + '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);

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

        }

    }

    DragHandler.attach(document.getElementById('ObjCountry'));

    </script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would made it as follows:

    -create a new method in draghandler which calls only the dragend private method
    -create a mousedown event to id=”ObjHdr” – it starts the dragging
    -create a mouseup event to id=”ObjHdr” – it ends the dragging

    into draghandler:
    detach: function(oElem) {oElem.onmousedown = DragHandler._dragEnd; return oElem; },

    document.getElementById(“ObjHdr”).onmousedown=”DragHandler.attach(document.getElementById(“ObjCountry”));”
    document.getElementById(“ObjHdr”).onmouseup=”DragHandler.detach(document.getElementById(“ObjCountry”));”

    result:
    Drag-drop event starts only if you click on the header and ends on mouseup.
    No action if you try to click on “ObjBody” – no dragprocess will start..

    regards
    Ozsi

    • 0