Ofset bir tıklama basılı tutulduğunda mousedown olayında güncellenmiyor Ofset ve sürükleyin

Question

İşte bir örnek, kırmızı kutuya tıkladıktan ve işaretçinin kutuya göre koordinatlarını gösterir.

Tıklatıp sürüklersem koordinatların güncellenmesine izin vermek için bu komut dosyasını nasıl değiştirebilirim? Tıklamaları tutup fareyi hareket ettirirken koordinatların canlı olarak güncellenmesine izin vermek. Fiddle dan

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

Kodu: Birkaç farklı şeyler denedim ama hiçbir şey ettik

$('#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); 
}); 

bugüne kadar çalışmış ve bir cevap vermeden birbirinden birinden benzer başka soru bulamıyorum.

Teşekkür

Answer 1

basitçe aşağı fare üzerinde bir bayrak ve sonra fare hareket bunun için kontrol edin. senin sürükle gidecekseniz:

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>