Drag and Drop

Basic drag and drop

by Beengie

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <center>
             <h2>Drag and drop HTML5 demo</h2>

            <div>Try to move the purple box into the pink box.</div>
            <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
                <p>Drag Me</p>
            </div>
            <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
        </center>
    </div>
    
    <div class="row">
        <ul>
            <li><a href="" id="dragMe" draggable="true" ondragstart="return dragStart(event)">Hello</a></li>
        </ul>
    </div>
    
</div>

CSS

#boxA, #boxB {
    float:left;
    padding:10px;
    margin:10px;
    -moz-user-select:none;
}
#boxA {
    background-color: #6633FF;
    width:75px;
    height:75px;
}
#boxB {
    background-color: #FF6699;
    width:150px;
    height:150px;
}

JavaScript

function dragStart(ev) {
    ev.dataTransfer.effectAllowed = 'move';
    ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
    ev.dataTransfer.setDragImage(ev.target, 0, 0);

    return true;
}

function dragEnter(ev) {
    event.preventDefault();
    return true;
}

function dragOver(ev) {
    return false;
}

function dragDrop(ev) {
    var src = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(src));
    ev.stopPropagation();
    return false;
}