如何使用 JavaScript/JQuery 打印出以像素为单位的鼠标拖动距离

Question

我是 JS 和 JQuery 的新手，我正在实现一个简单的网络应用程序：我用 16 张图片制作了一张地图（4x4 网格）。当用户单击或释放鼠标时，控制台会打印出鼠标的 X 和 Y 位置 - 我能够做到这一点。

如果用户点击并拖动鼠标，我需要打印出一个以像素为单位的拖动距离。我做了一些研究，但未能找到令人满意的答案。大多数解决方案都涉及对 "canvas" 和 "context" 的冗长操作，我对此一点都不熟悉； JQuery 中是否有一个简单的函数可以让您在知道坐标后更改像素的颜色？否则，我该如何解决这个问题？

这是我的代码：

'use strict';

function printMousePos(e){
    var cursorX = e.clientX;
    var cursorY = e.clientY;
    console.log("X: " + cursorX + " Y: " + cursorY);
}
document.addEventListener("mouseup",printMousePos);
document.addEventListener("mousedown",printMousePos);

body{
     margin:0;
 }
.map img{
    float:left;
    width:25%;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" type="text/css" href="map.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script type="text/javascript" src="map.js"></script>
</head>
<body>
    <div class="map" >
        <img src="map_images/1.png">
        <img src="map_images/2.png">
        <img src="map_images/3.png">
        <img src="map_images/4.png">
    </div>
    <div class="map">
        <img src="map_images/5.png">
        <img src="map_images/6.png">
        <img src="map_images/7.png">
        <img src="map_images/8.png">
    </div>
    <div class="map">
        <img src="map_images/9.png">
        <img src="map_images/10.png">
        <img src="map_images/11.png">
        <img src="map_images/12.png">
    </div>
    <div class="map">
        <img src="map_images/13.png">
        <img src="map_images/14.png">
        <img src="map_images/15.png">
        <img src="map_images/16.png">
    </div>
</body>
</html>

Answer 1

我建议使用 jQuery UI 的 draggable 函数。这使得实际获得拖动位置变得容易得多。

我刚刚取了你的 HTML 代码的 1 个特定部分：

<div class="map" >
    <img>1</img>
    <img>2</img>
    <img>3</img>
    <img>4</img>
</div>

我使用这个 JS 代码：

$(document).ready(function(e) {
    $('.map img').mousedown(function(e) {
        var cursorX = e.pageX;
        var cursorY = e.pageY;        
        $('#mouseX').text('mouse x: ' + cursorX);
        $('#mouseY').text('mouse y: ' + cursorY);
    });   
    $('.map img').draggable(
    {
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;           
            $('#posX').text('drag x: ' + xPos);
            $('#posY').text('drag y: ' + yPos);
        }
    });

});

所以请记住，您需要在 header jQuery 和 jQuery UI.

中包含

要查看它的实际效果，请查看此 JSFIDDLE

如何使用 JavaScript/JQuery 打印出以像素为单位的鼠标拖动距离

How to print out a mouse drag distance in pixels using JavaScript/JQuery

javascript

css

jquery

pixel

mouseevent