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

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

本文关键字：打印 为单位 鼠标 拖动 距离 像素 何使用 JavaScript JQuery      更新时间：2023-09-26

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

如果用户单击并拖动鼠标，我需要打印出以像素为单位的拖动距离。我做了一些调查，但没能找到一个令人满意的答案。大多数解决方案都涉及对"画布"answers"上下文"的冗长操作，而我对此并不熟悉;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>

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

我只取了你的HTML代码的一个特定部分:

<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);
        }
    });
});

所以请记住，你需要在标题中包含jQuery和jQuery UI。

查看JSFIDDLE

相关文章：