Question

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

如果用户点击并拖动鼠标，我需要以像素为单位打印拖动距离。我做了一些研究，但未能找到令人满意的答案。大多数解决方案涉及对“画布”和“背景”的冗长操纵，我根本不熟悉; 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代码的一个特定部分：

<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

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

1 个答案: