我是 JS 和 JQuery 的新手，我正在实现一个简单的 Web 应用程序:我使用 16 张图片来制作 map (4x4 网格)。当用户单击或释放鼠标时，控制台会打印出鼠标的 X 和 Y 位置 - 我能够做到这一点。
如果用户单击并拖动鼠标，我需要打印出以像素为单位的拖动距离。我做了一些研究，但未能找到令人满意的答案。大多数解决方案都涉及对“ Canvas ”和“上下文”的冗长操作，而我对此根本不熟悉； 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 代码的 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 - 如何使用 JavaScript/JQuery 打印鼠标拖动距离(以像素为单位)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32643995/