Wie kann ich einen beweglichen <hr> machen?

Question

Ich habe eine Frage. Wie kann ich eine bewegliche <hr> erstellen und über ein Bild bewegen? Ich dachte über die Änderung des Parameters "Marge", aber ich weiß nicht, wie man die <hr> über das Bild setzen.

Bitte helfen Sie mir, wenn Sie können.

Answer 1

Antwort basiert auf: https://jsfiddle.net/tovic/Xcb8d/

CSS

#draggable-hr { 
    cursor:move; 
    position: absolute; 
    width: 100%; 
} 

HTML

<hr id="draggable-hr"> 

JavaScript

var selected = null, // Object of the element to be moved 
x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer 
x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element 

    // Will be called when user starts dragging an element 
    function _drag_init(elem) { 
     // Store the object of the element which needs to be moved 
     selected = elem; 
     x_elem = x_pos - selected.offsetLeft; 
     y_elem = y_pos - selected.offsetTop; 
    } 

    // Will be called when user dragging an element 
    function _move_elem(e) { 
     x_pos = document.all ? window.event.clientX : e.pageX; 
     y_pos = document.all ? window.event.clientY : e.pageY; 
     if (selected !== null) { 
      selected.style.left = (x_pos - x_elem) + 'px'; 
      selected.style.top = (y_pos - y_elem) + 'px'; 
     } 
    } 

    // Destroy the object when we are done 
    function _destroy() { 
     selected = null; 
    } 

    // Bind the functions... 
    document.getElementById('draggable-hr').onmousedown = function() { 
     _drag_init(this); 
     return false; 
    }; 

    document.onmousemove = _move_elem; 
    document.onmouseup = _destroy; 

Answer 2

Warum wollen Sie das tun wollen?

Sie möchten eine Linie in einem Bild richtig zeichnen? Warum verwenden Sie keine Leinwand dafür? Hier ein Beispiel:

https://jsfiddle.net/vo769cfx

Original image: 
<br> 
<br> 
<img id="scream" width="220" height="277" src="http://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream"> 
<br> Canvas: 
<br> 
<br> 
<canvas id="myCanvas" width="320" height="277"></canvas> 

    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = document.getElementById("scream"); 

    ctx.drawImage(img, 50, 0); 
    ctx.beginPath(); 
    ctx.moveTo(0, 138); 
    ctx.lineTo(320, 138); 
    ctx.stroke(); 

Sie müssen nur die Zeile jedes Mal neu zeichnen Klicken und Ziehen in der Leinwand.