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

I'm new to JS and JQuery, and I'm implementing a simple web app: I used 16 pictures to make a map (4x4 grid). When the user clicks or releases the mouse, the console prints out the mouse's X and Y position - I was able to do this.

If the user clicks and drags the mouse, I need to print out a drag distance in pixels. I did some research but wasn't able to find a satisfying answer. Most solutions involve lengthy manipulation of "canvas" and "context", which I'm not familiar with at all; is there a simple function in JQuery that allows you to change a pixel's color once you know its coordinates? Otherwise, how should I go about this problem?

Here's my code:

'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>

Solution

What I would suggest is to use the draggable function of jQuery UI. This makes it a lot easier to actually get the dragged position.

I just took 1 specific part of your HTML Code:

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

and I use this JS code:

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

});

So keep in mind that you need to include in your header jQuery and jQuery UI.

To see it in action check this JSFIDDLE