Search code examples
javascripthtmldraggablehandle

Make only part of a div draggable

How do i create something similar to to jquery's "draggable handles" in Javascript?

(Jquery is unfortunately not an option for me.)

I have div called "dxy" within it I have another div called "draggable_handle". At the moment I can drag dxy around wherever I press. How do I make is so that I can drag dxy around, but only when i press on draggable_handle and no where else in the div?

<div id="dxy">
  <div id="draggable_handle">
    <p>
    Draggable part
    </p>
  </div>
</div>

I made a JsFiddle, which will make what I mean clearer, here: http://jsfiddle.net/Lk2hLthp/7/

Please add some code examples or a jsfiddle as I am a newbie. =)

Solution

  • Add event listeners to inner element instead of outer like this:

    function addListeners() {
  document.getElementById('draggable_handle').addEventListener('mousedown', mouseDown, false);
  window.addEventListener('mouseup', mouseUp, false);
}