Phát hành bản vẽ HTML5 offsetX bù đắp nhảy

Question

Tôi đang phát bằng tính năng kéo và thả HTML5 và theo dõi vị trí chuột trong khi kéo.

OffsetX và OffsetY làm việc tuyệt vời cho đến khi bạn thả chuột, offsets nhảy đến một số tiêu cực đến sự kiện kéo cuối cùng cử

đây là html:

<div id="dragger"></div> 
<div id="console"></div> 

đây là css:

#dragger{ 
    -webkit-user-drag: element; 
    width: 100px; 
    height: 100px; 
    background: hsla(200, 100%, 50%, 0.4); 
}​ 

và js

$('#dragger').bind('drag', function (e) { 
    $('#console').html(e.originalEvent.offsetX); 
})​ 

Bạn cũng có thể thử nghiệm tại http://jsfiddle.net/Eu2mz/5/

Ngoài ra, tôi chỉ đang cố gắng làm cho nó hoạt động trong webkit ngay bây giờ.

Answer 1

liên kết jsfiddle của bạn dường như cũng bị ảnh hưởng bởi kích thước cửa sổ. Hãy thử nó trong tài liệu riêng của nó để thu hẹp khả năng?

Answer 2

Bạn có thể thêm sự kiện kéo kết thúc để giải quyết sự cố.
như thế này:

$('#dragger').bind('dragend', function (e) { 
    $('#console').html(e.originalEvent.offsetX); 
}) 

Answer 3

Tôi không biết tại sao nhưng khi kéo lên hoặc thả bên ngoài của đối tượng có thể kéo sẽ thay đổi offsetX, offsetY, clientX, clientY vv tính bằng một số khó hiểu.

Bản sửa lỗi là preventDefault trên sự kiện thả tài liệu và kéo.

document.addEventListener("drag", function(event) { 
 
    var element = document.getElementById('console'); 
 
    element.textContent = event.clientX; 
 
}, false); 
 

 
document.addEventListener("dragover", function(event) { 
 
    event.preventDefault(); 
 
}, false); 
 

 
document.addEventListener("drop", function(event) { 
 
    event.preventDefault(); 
 
}, false);

#dragger{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: hsla(200, 100%, 50%, 0.4); 
 
}

<div draggable="true" id="dragger" ondragstart="event.dataTransfer.setData('text/plain',null)"></div> 
 
<div id="console"></div>

Answer 4

tôi đã cùng một vấn đề và đưa ra một giải pháp mà sẽ làm việc 99,99999% thời gian. giải thích là dưới đây:

Solution (nên làm việc trong mọi trường hợp người dùng của bạn sẽ chạy vào)

eng.window.addEventListener(
    "drag" 
    ,function(event){ 
     //If both screenX and screenY are 0, likely the user just released. 
     if(!event.screenX && !event.screenY) return; 

     //Your code here 
    } 
); 

Giải thích

Tôi nhìn qua sự kiện này trở về giải phóng chuột và so sánh nó với sự kiện này ngay trước đó, và không thể tìm thấy bất cứ thứ gì sẽ hoạt động trong 100% các trường hợp - không có tính năng "buttonPressed" dễ dàng hoặc những thứ tương tự ẩn bên trong đối tượng.

tôi đã thấy rằng mặc dù mọi biện pháp duy nhất của vị trí con trỏ được thay đổi khi bạn phát hành: clientX, layerX, offsetX, pageX, screenX, và thường xuyên x/y. Tất cả các giá trị này đều mặc định ở giá trị trên cùng bên trái, có thể là góc trên cùng bên trái của cửa sổ hoặc màn hình.

Nhưng khả năng người dùng của bạn sẽ chuyển sang chế độ toàn màn hình kéo và thả phần tử vào pixel trên cùng bên trái của màn hình của họ là gì?(Trong Chrome dành cho tôi, screenX thực sự được đặt ở cạnh trái của cửa sổ; nhưng screenY sẽ tính đến HUD của Chrome)

Vì vậy, mặc dù ở trên sẽ không hoạt động trong trường hợp 1 cạnh đó (người dùng của bạn sẽ không bao giờ -truy cập vào), nó sẽ làm việc mọi lúc khác.

Đã thử nghiệm trong Chrome.