Machen Sie nur Teil eines div ziehbaren

Question

Wie erstelle ich etwas ähnlich zu jquery "ziehbare Griffe" in Javascript?

(JQuery ist leider keine Option für mich.)

Ich habe in ihm Ich habe ein anderes div "draggable_handle" genannt genannt "dxy" gesch. Im Moment kann ich dxy umherziehen, wo auch immer ich drücke. Wie mache ich das so, dass ich dxy umher ziehen kann, aber nur wenn ich auf draggable_handle drücke und nirgendwo sonst im div?

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

machte ich einen JsFiddle, das machen, was ich meine klarer, hier: http://jsfiddle.net/Lk2hLthp/7/

Bitte fügen Sie einige Code-Beispiele oder ein jsfiddle als ich ein Neuling bin. =)

Answer 1

hinzufügen Ereignis-Listener innere Element anstelle von äußeren wie folgt aus:

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

Answer 2

Ich weiß nicht, ob ich verstanden, was Sie versuchen zu tun, aber das Hinzufügen der „MouseDown-“ Hörer Werke draggable_handle für mich:

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

Answer 3

in Ihrem Beispiel zu ändern, nur das, was id Sie in den addListeners greifen Funktion, die Sie geben, was Sie brauchen: document.getElementById('draggable_handle').addEventListener('mousedown', mouseDown, false);

statt: document.getElementById('dxy').addEventListener('mousedown', mouseDown, false);

ich gegabelt Sie Geige und machte die Änderung: http://jsfiddle.net/BlessYAHU/f687ppg8/

Das funktioniert, weil in Ihren Funktionen (mouseDown-, divMove), erhalten Sie den Behälter dom Element (dxy).