aresnick/_drag.md

## _drag.md

      
    Raw
  

              _drag.md
            
          
    A small example of how you can implement click-to-drag in JavaScript

This is a small example implementing click-to-drag with a bit of JavaScript…Please let us know if you have any questions!
Further doing


Watch the short screencast associated with this sketch here
Check out another gist of ours on mouse events here
Modify the code so that:

…if you double-click the square, it disappears
…when you release the square, its innerHTML is replaced with its x- and y-coordinates
…if you click and drag within a certain distance of another div, the dragged div 'clicks' into place— i.e. if you drag it within a certain square and let go, it always ends up in the center of that square


Further reading


MDN's reference on position
"Absolute, Relative, Fixed Positioning: How Do They Differ?"
"Learn CSS Positioning in Ten Steps"
CodeAcademy on CSS positioning
MDN's refernce on addEventListener
A pretty extensive tutorial on events in JavaScript
Another gist of ours on mouse events


## drag.html
<html>

<head>
    <style>
    #toDrag {
        position: absolute; /* Position our square absolutely; you can read more about absolute positioning at https://developer.mozilla.org/en-US/docs/Web/CSS/position */
        width: 100px;
        height: 100px;
        background-color: lightblue;
    }
    </style>
</head>

<body>
    <div id='toDrag'></div>
    <script>
    var square = document.querySelector('#toDrag'); // Grab our #toDrag square
    var draggingSquare = false; // Set a flag for whether we're dragging the square

    var mousePosition = { // set up a global variable where we'll store a dictionary of mousePosition coordinates, starting out as null — you can read more about null at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null
        'x': null,
        'y': null
    };

    var updateMousePosition = function(event) { // Update our mousePosition with the information from the event we pass, you can read more about mouseEvents at https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
        mousePosition.x = event.x;
        mousePosition.y = event.y;
    };

    var move = function(element, x, y) { // Move an element's center to x, y
    	// You can read more about determining the size of elements at https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
        element.style.left = x - element.offsetWidth / 2 + "px";
        element.style.top = y - element.offsetHeight / 2 + "px";
    };

    square.addEventListener('mousedown', function() {
    	// When we mousedown on the square, toggle draggingSquare to true
        draggingSquare = true;
    });

    square.addEventListener('mouseup', function() {
    	// When we mouseup on the square, toggle draggingSquare to false
        draggingSquare = false;
    });

    window.addEventListener('mousemove', function(event) { // Whenever our mouse moves in the window
        updateMousePosition(event); // update our mousePosition dictionary
        if (draggingSquare) { // and if we're dragging the square
            move(square, mousePosition.x, mousePosition.y); // move the square
        }
    });
    </script>
</body>

</html>
	<html>

	<head>
	<style>
	#toDrag {
	position: absolute; /* Position our square absolutely; you can read more about absolute positioning at https://developer.mozilla.org/en-US/docs/Web/CSS/position */
	width: 100px;
	height: 100px;
	background-color: lightblue;
	}
	</style>
	</head>

	<body>
	<div id='toDrag'></div>
	<script>
	var square = document.querySelector('#toDrag'); // Grab our #toDrag square
	var draggingSquare = false; // Set a flag for whether we're dragging the square

	var mousePosition = { // set up a global variable where we'll store a dictionary of mousePosition coordinates, starting out as null — you can read more about null at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null
	'x': null,
	'y': null
	};

	var updateMousePosition = function(event) { // Update our mousePosition with the information from the event we pass, you can read more about mouseEvents at https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
	mousePosition.x = event.x;
	mousePosition.y = event.y;
	};

	var move = function(element, x, y) { // Move an element's center to x, y
	// You can read more about determining the size of elements at https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
	element.style.left = x - element.offsetWidth / 2 + "px";
	element.style.top = y - element.offsetHeight / 2 + "px";
	};

	square.addEventListener('mousedown', function() {
	// When we mousedown on the square, toggle draggingSquare to true
	draggingSquare = true;
	});

	square.addEventListener('mouseup', function() {
	// When we mouseup on the square, toggle draggingSquare to false
	draggingSquare = false;
	});

	window.addEventListener('mousemove', function(event) { // Whenever our mouse moves in the window
	updateMousePosition(event); // update our mousePosition dictionary
	if (draggingSquare) { // and if we're dragging the square
	move(square, mousePosition.x, mousePosition.y); // move the square
	}
	});
	</script>
	</body>

	</html>