Offset nie aktualizuje się po mousedown wydarzeniu podczas wstrzymania kliknij i przeciągnij

Question

Oto przykładowe skrzypce, gdy kliknąłeś na czerwone pole i pokazuje współrzędne twojego wskaźnika względem pola.

Jak mogę zmienić ten skrypt, aby umożliwić koordynację aktualizacji po kliknięciu i przeciągnięciu? Umożliwienie współrzędnym aktualizacji na żywo, gdy przytrzymuję kliknięcie i poruszam myszą.

http://jsfiddle.net/lonesomeday/5qxtL/2/

Kod z Fiddle:

$('#target').mousedown(function(e) { 
    var offset = $(this).offset(), 
     imgLeft = e.pageX - offset.left, 
     imgTop = e.pageY - offset.top; 

    $('#result').text('Mouse clicked x = ' + imgLeft + ' Y = ' + imgTop); 
}); 

Próbowałem kilka różnych rzeczy, ale nic nie działało tak daleko i nie może znaleźć kolejne pytanie, który jest podobny niezależnie od siebie bez odpowiedzi.

Dzięki

Answer 1

prostu ustawić flagę na myszy w dół, a następnie sprawdzić, czy to na ruch myszy. theres Twój drag:

var mouseDownFlag = false; 
 
$('#target').mousedown(function(e) { 
 
    mouseDownFlag = true; 
 
    var offset = $(this).offset(), 
 
    imgLeft = e.pageX - offset.left, 
 
    imgTop = e.pageY - offset.top; 
 

 
    $('#result').text('Mouse clicked x = ' + imgLeft + ' Y = ' + imgTop); 
 
}); 
 
$('#target').mouseup(function(e) { 
 
    mouseDownFlag = false; 
 
}); 
 
$('#target').mousemove(function(e) { 
 
    if (mouseDownFlag) { 
 
    var offset = $(this).offset(), 
 
     imgLeft = e.pageX - offset.left, 
 
     imgTop = e.pageY - offset.top; 
 
    $('#result').text('Mouse clicked x = ' + imgLeft + ' Y = ' + imgTop); 
 
    } 
 
});

div { 
 
    width: 200px; 
 
    height: 100px; 
 
    position: relative; 
 
    left: 30px; 
 
    top: 15px; 
 
    background-color: #f00; 
 
} 
 
#result { 
 
    background-color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="target">My target div</div> 
 
<div id="result"></div>