Aesthetic Cookie Aesthetic Cookie - 5 months ago 11x
Javascript Question

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">
Draggable part

I made a JsFiddle, which will make what I mean clearer, here:

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


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);