adinan-cenci/drag-and-drop-example.markdown

## drag-and-drop-example.markdown

      
    Raw
  

              drag-and-drop-example.markdown
            
          
    Drag and drop example

A Pen by AdinanCenci on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

    </head>
    <body>
       <div id="wrapper">
            <aside>
                <div class="drop-zone">
                    <div class="dragable">You may drag me</div>
                    <div class="dragable">you may drag me too!</div>
                </div>
                <div class="clear"></div>
            </aside>
            <main>
                <h1>Drag and drop</h1>
                <p>Just a simple example of drag-drop code using pure Java Script.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            </main>

            <footer>
                Drop here:
                <div class="drop-zone"></div>
            </footer>

            <div class="clear"></div>
        </div>
    </body>
</html>

## script.js
function makeDragable(element)
{
    element.addEventListener('mousedown', dragStart.bind(element));
    document.addEventListener('mouseup', dragEnd.bind(element));
}

//------------------------------------------------------------

function dragStart(evt /*mousedown*/)
{
    if (evt.which != 1) {
        return;
    }

    evt.stopPropagation();

    var position        = this.getBoundingClientRect();
    this.mouseX         = evt.clientX - position.x;
    this.mouseY         = evt.clientY - position.y;
    this.placeHolder    = createPlaceholder(this);
    this.style.left     = (evt.clientX - this.mouseX)+'px';
    this.style.top      = (evt.clientY - this.mouseY)+'px';
    this.classList.add('draging');

    if (! this.designateDropZone) {
        this.designateDropZone = designateDropZone.bind(this);
    }

    if (! this.drag) {
        this.drag = drag.bind(this);
    }

    this.parentNode.insertBefore(this.placeHolder, this);

    document.addEventListener('mouseover', this.designateDropZone);
    document.addEventListener('mousemove', this.drag);
}

function drag(evt /*mousemove*/)
{
    this.style.left = (evt.clientX - this.mouseX)+'px';
    this.style.top  = (evt.clientY - this.mouseY)+'px';
}

function dragEnd()
{
    if (this.dropzone && this.dropzone != this.parentNode && this != this.dropzone) {
        this.dropzone.appendChild(this);
    }

    if (this.placeHolder) {
        this.placeHolder.remove();
    }

    this.classList.remove('draging');
    document.removeEventListener('mouseover', this.designateDropZone);
    document.removeEventListener('mousemove', this.drag);
}

//------------------------------------------------------------

function createPlaceholder(base)
{
    var placeHolder, style, position, baseStyle;

    position    = base.getBoundingClientRect();
    baseStyle   = getComputedStyle(base);

    style       =
    {
        position:       baseStyle.position,
        float:          baseStyle.cssFloat,
        top:            baseStyle.top,
        bottom:         baseStyle.bottom,
        left:           baseStyle.left,
        right:          baseStyle.right,
        marginTop:      baseStyle.marginTop,
        marginRight:    baseStyle.marginRight,
        marginBottom:   baseStyle.marginBottom,
        marginLeft:     baseStyle.marginLeft,
        width:          position.width+'px',
        height:         position.height+'px'
    };

    placeHolder = document.createElement('div');
    placeHolder.classList.add('place-holder');

    for (let x in style) {
        placeHolder.style[x] = style[x];
    }

    return placeHolder;
}

//------------------------------------------------------------

function designateDropZone(evt /*mouseover*/)
{
    evt.stopPropagation();

    if (evt.target == this) {
        return;
    }

    if (! isValidDropZone(evt.target)) {
        return;
    }

    this.dropzone = evt.target;
}

function isValidDropZone(element)
{
    return element.classList.contains('drop-zone');
}

document.addEventListener('DOMContentLoaded', function()
{
    document.querySelectorAll('.dragable').forEach(function(el)
    {
        makeDragable(el);
    });
});

## style.css
* {
    box-sizing: border-box;
    -moz-user-select: none;
    -webkit-user-select: none;
}

body {
    margin: 0px;
    font-family: 'Roboto', 'Arial';
    font-size: 14px;
    line-height: 1.3em;
    background-color: #fafbfc;
}

#wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 960px;
    min-height: 100vh;
    padding: 10px;
    border: solid 1px #ddd;
    border-top: none;
    border-bottom: none;
    max-width: 100%;
    margin: 0px auto;
    background: #fff;
}

aside {
    width: 190px;
    margin: 0px 20px 0px 0px;
}

main {
    width: calc(100% - 210px);
    float: left;
}

footer {
    width: 100%;
    min-height: 200px;
}

.clear {
    clear: both;
}

.dragable {
    padding: 10px;
    margin-bottom: 10px;
    color: #fff;
    background-color: #0366d6;
}

.drop-zone {
    min-height: 200px;
    padding: 10px;
    border: solid 1px #ddd;
    margin-bottom: 20px;
    background: #f6f8fa;
}

.place-holder {
    display: block;
    border: dashed 5px #000;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.5);
}

.draging {
    pointer-events: none;
    position: fixed;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>

	</head>
	<body>
	<div id="wrapper">
	<aside>
	<div class="drop-zone">
	<div class="dragable">You may drag me</div>
	<div class="dragable">you may drag me too!</div>
	</div>
	<div class="clear"></div>
	</aside>
	<main>
	<h1>Drag and drop</h1>
	<p>Just a simple example of drag-drop code using pure Java Script.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	</main>

	<footer>
	Drop here:
	<div class="drop-zone"></div>
	</footer>

	<div class="clear"></div>
	</div>
	</body>
	</html>
	function makeDragable(element)
	{
	element.addEventListener('mousedown', dragStart.bind(element));
	document.addEventListener('mouseup', dragEnd.bind(element));
	}

	//------------------------------------------------------------

	function dragStart(evt /mousedown/)
	{
	if (evt.which != 1) {
	return;
	}

	evt.stopPropagation();

	var position = this.getBoundingClientRect();
	this.mouseX = evt.clientX - position.x;
	this.mouseY = evt.clientY - position.y;
	this.placeHolder = createPlaceholder(this);
	this.style.left = (evt.clientX - this.mouseX)+'px';
	this.style.top = (evt.clientY - this.mouseY)+'px';
	this.classList.add('draging');

	if (! this.designateDropZone) {
	this.designateDropZone = designateDropZone.bind(this);
	}

	if (! this.drag) {
	this.drag = drag.bind(this);
	}

	this.parentNode.insertBefore(this.placeHolder, this);

	document.addEventListener('mouseover', this.designateDropZone);
	document.addEventListener('mousemove', this.drag);
	}

	function drag(evt /mousemove/)
	{
	this.style.left = (evt.clientX - this.mouseX)+'px';
	this.style.top = (evt.clientY - this.mouseY)+'px';
	}

	function dragEnd()
	{
	if (this.dropzone && this.dropzone != this.parentNode && this != this.dropzone) {
	this.dropzone.appendChild(this);
	}

	if (this.placeHolder) {
	this.placeHolder.remove();
	}

	this.classList.remove('draging');
	document.removeEventListener('mouseover', this.designateDropZone);
	document.removeEventListener('mousemove', this.drag);
	}

	//------------------------------------------------------------

	function createPlaceholder(base)
	{
	var placeHolder, style, position, baseStyle;

	position = base.getBoundingClientRect();
	baseStyle = getComputedStyle(base);

	style =
	{
	position: baseStyle.position,
	float: baseStyle.cssFloat,
	top: baseStyle.top,
	bottom: baseStyle.bottom,
	left: baseStyle.left,
	right: baseStyle.right,
	marginTop: baseStyle.marginTop,
	marginRight: baseStyle.marginRight,
	marginBottom: baseStyle.marginBottom,
	marginLeft: baseStyle.marginLeft,
	width: position.width+'px',
	height: position.height+'px'
	};

	placeHolder = document.createElement('div');
	placeHolder.classList.add('place-holder');

	for (let x in style) {
	placeHolder.style[x] = style[x];
	}

	return placeHolder;
	}

	//------------------------------------------------------------

	function designateDropZone(evt /mouseover/)
	{
	evt.stopPropagation();

	if (evt.target == this) {
	return;
	}

	if (! isValidDropZone(evt.target)) {
	return;
	}

	this.dropzone = evt.target;
	}

	function isValidDropZone(element)
	{
	return element.classList.contains('drop-zone');
	}

	document.addEventListener('DOMContentLoaded', function()
	{
	document.querySelectorAll('.dragable').forEach(function(el)
	{
	makeDragable(el);
	});
	});
	* {
	box-sizing: border-box;
	-moz-user-select: none;
	-webkit-user-select: none;
	}

	body {
	margin: 0px;
	font-family: 'Roboto', 'Arial';
	font-size: 14px;
	line-height: 1.3em;
	background-color: #fafbfc;
	}

	#wrapper {
	display: flex;
	flex-wrap: wrap;
	width: 960px;
	min-height: 100vh;
	padding: 10px;
	border: solid 1px #ddd;
	border-top: none;
	border-bottom: none;
	max-width: 100%;
	margin: 0px auto;
	background: #fff;
	}

	aside {
	width: 190px;
	margin: 0px 20px 0px 0px;
	}

	main {
	width: calc(100% - 210px);
	float: left;
	}

	footer {
	width: 100%;
	min-height: 200px;
	}

	.clear {
	clear: both;
	}

	.dragable {
	padding: 10px;
	margin-bottom: 10px;
	color: #fff;
	background-color: #0366d6;
	}

	.drop-zone {
	min-height: 200px;
	padding: 10px;
	border: solid 1px #ddd;
	margin-bottom: 20px;
	background: #f6f8fa;
	}

	.place-holder {
	display: block;
	border: dashed 5px #000;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.5);
	}

	.draging {
	pointer-events: none;
	position: fixed;
	}