title: Error in DIV tag scrolling
body: <p>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...</p>
  
  <p>Here is the code...</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
      &lt;HTML&gt;
      &lt;HEAD&gt;
      &lt;TITLE&gt; Reporting&lt;/TITLE&gt;
      &lt;META NAME="Generator" CONTENT="EditPlus"&gt;
      &lt;META NAME="Author" CONTENT=""&gt;
      &lt;META NAME="Keywords" CONTENT=""&gt;
      &lt;META NAME="Description" CONTENT=""&gt;
      &lt;style&gt;
      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;
      }
  
      &lt;/style&gt;
  
      &lt;/HEAD&gt;
      &lt;BODY&gt;
  
       &lt;div id="ObjCountry" class="Object"&gt;
         &lt;div class="ObjHdr"&gt;Country&lt;/div&gt;
         &lt;div id =sd class="ObjBody" unselectable="on"&gt;
          &lt;div class="ObjEle"&gt;India&lt;/div&gt;
          &lt;div class="ObjEle"&gt;China&lt;/div&gt;
          &lt;div class="ObjEle"&gt;USA&lt;/div&gt;
          &lt;div class="ObjEle"&gt;Iran&lt;/div&gt;
          &lt;div class="ObjEle"&gt;Iraq&lt;/div&gt;
          &lt;div class="ObjEle"&gt;Indonesia&lt;/div&gt;
         &lt;/div&gt;
       &lt;/div&gt;
  
      &lt;/BODY&gt;
      &lt;/HTML&gt;
  
      &lt;script&gt;
  
      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&lt;=0){tmpX = 0;}
              if(tmpY&lt;=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'));
  
      &lt;/script&gt;
  </code></pre>