70-480 Drag and Drop

by isogunro

HTML

<div id="container">
		<div id="hole1" class="hole"><div id="item1" class="item" draggable="true">1</div></div>
		<div id="hole2" class="hole"><div id="item1" class="item" draggable="true">2</div></div>
		<div id="hole3" class="hole"><div id="item1" class="item" draggable="true">3</div></div>
		<div id="hole4" class="hole"></div>		
	</div>

CSS

#container {;
    border:solid;
    width: 332px;
    height: 332px;
    margin-right: auto;
    margin-left: auto;
}

.hole {
    background-color: black;
    border: solid;
    width: 160px;
    height: 160px;
    float: left;
}

.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFFFFF;
    text-align: center;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;      
}

.dragging {
    background-color: yellow;
}

JavaScript

var $draggedItem;

$(document).ready(function () {
    // Drag
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    
    // Drop
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem); 
});

/* DRAG functions */
function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');   
}

/* DROP functions */
function preventDefault(e) {
    e.preventDefault();   
}
function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo($(e.target));
    }
}