title: Dragging and Dropping in Javascript
body: <p>I am making a <a href="http://code.google.com/p/sticky-note-system/downloads/detail?name=draggingpractice.htm&amp;can=2&amp;q=&amp;surl=1&amp;safe=active#makechanges" rel="nofollow">sticky note system</a>, and I want the sticky notes to be draggable with javascript. I found a drag and drop script on this <a href="http://luke.breuer.com/" rel="nofollow">site</a> which was quite useful to me. But I have a “drag bar” that is inside the sticky note div which is supposed to be the only place where you can drag that specific sticky note. The script I have drags only what the cursor is clicking on and I want it to drag the “.dragbar” div’s parent element, “.parent”. </p>
  
  <p>Right now, the script is set to drag .parent when you click on .parent. How, in this code can I select the parent div of “.dragbar”, which is “.parent”?</p>
  
  <p>If I make the script select .dragbar, it just moves the dragbar around inside the .parent. note: the script is the original code, except the selector names in lines 87 and 95 are changed from “drag” to “parent”.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              .pagecontent {
                  width:98%;
                  height:96%;
                  overflow:hidden;
                  background:lightyellow;
                  border:1px solid black;
                  padding:10px;
              }
              .parent {
                  position:relative;
                  height:300px;
                  width:300px;
                  background-color:gray;
                  border:1px solid black;
                  float:left;
                  margin:0 10px 0 0;
                  overflow:auto;
              }
              .dragbar {
                  height:50px;
                  width:300px;
                  background:lightgray;
                  cursor:move;
                  position:relative;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="pagecontent"&gt;
              &lt;h1&gt;Dragging Practice&lt;/h1&gt;
              &lt;h3&gt;Drag and drop the parent div by using the child dragbar&lt;/h3&gt;
              &lt;pre id="debug"&gt;mouse up&lt;/pre&gt;
              &lt;div class="parent"&gt;
                  &lt;div class="dragbar"&gt;I am the Child, my class is .dragbar&lt;/div&gt;I am the Parent, my class is
                  .parent&lt;/div&gt;
              &lt;div class="parent"&gt;
                  &lt;div class="dragbar"&gt;I am the Child, my class is .dragbar&lt;/div&gt;I am the Parent, my class is
                  .parent&lt;/div&gt;
              &lt;script language="JavaScript" type="text/javascript"&gt;
                  &lt;!--
                  // this is simply a shortcut for the eyes and fingers
                  function $(id) {
                      return document.getElementById(id);
                  }
                  var _startX = 0; // mouse starting positions
                  var _startY = 0;
                  var _offsetX = 0; // current element offset
                  var _offsetY = 0;
                  var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove
                  var _oldZIndex = 0; // we temporarily increase the z-index during drag
                  var _debug = $('debug'); // makes life easier
                  InitDragDrop();
  
                  function InitDragDrop() {
                      document.onmousedown = OnMouseDown;
                      document.onmouseup = OnMouseUp;
                  }
  
                  function OnMouseDown(e) {
                      // IE is retarded and doesn't pass the event object
                      if (e == null) e = window.event;
                      // IE uses srcElement, others use target
                      var target = e.target != null ? e.target : e.srcElement;
                      _debug.innerHTML = target.className == 'parent' //Selector
                      ?
                      'draggable element clicked' : 'NON-draggable element clicked';
                      // for IE, left click == 1
                      // for Firefox, left click == 0
                      if ((e.button == 1 &amp;&amp; window.event != null || e.button == 0) &amp;&amp; target.className == 'parent') //Selector
                      {
                          // grab the mouse position
                          _startX = e.clientX;
                          _startY = e.clientY;
                          // grab the clicked element's position
                          _offsetX = ExtractNumber(target.style.left);
                          _offsetY = ExtractNumber(target.style.top);
                          // bring the clicked element to the front while it is being dragged
                          _oldZIndex = target.style.zIndex;
                          target.style.zIndex = 10000;
                          // we need to access the element in OnMouseMove
                          _dragElement = target;
                          // tell our code to start moving the element with the mouse
                          document.onmousemove = OnMouseMove;
                          // cancel out any text selections
                          document.body.focus();
                          // prevent text selection in IE
                          document.onselectstart = function () {
                              return false;
                          };
                          // prevent IE from trying to drag an image
                          target.ondragstart = function () {
                              return false;
                          };
                          // prevent text selection (except IE)
                          return false;
                      }
                  }
  
                  function ExtractNumber(value) {
                      var n = parseInt(value);
                      return n == null || isNaN(n) ? 0 : n;
                  }
  
                  function OnMouseMove(e) {
                      if (e == null) var e = window.event;
                      // this is the actual "drag code"
                      _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
                      _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
                      _debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';
                  }
  
                  function OnMouseUp(e) {
                      if (_dragElement != null) {
                          _dragElement.style.zIndex = _oldZIndex;
                          // we're done with these events until the next OnMouseDown
                          document.onmousemove = null;
                          document.onselectstart = null;
                          _dragElement.ondragstart = null;
                          // this is how we know we're not dragging
                          _dragElement = null;
                          _debug.innerHTML = 'mouse up';
                      }
                  }
                  //--&gt;
              &lt;/script&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>