[Rise]

А так тоже работает и без jquery) Drag and Drop API

<style>
div {
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.drag {
    background: #555;
}
.drag.active {
    opacity: 0.5;
}
.drop {
    border: 1px dashed #000;
}
.drop.active {
    background: #ccc;
}
</style>
  
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>

<div class="drag" draggable="true"></div>
<div class="drag" draggable="true"></div>
<div class="drag" draggable="true"></div>

<script>
var dragged;
// Required: attribute 'draggable', events 'dragstart', 'dragover', 'drop'
document.addEventListener('dragstart', function (e) {
    e.dataTransfer.setData('text', '');
    e.dataTransfer.effectAllowed = 'move';
    dragged = e.target;
    e.target.classList.add('active');
});
document.addEventListener('dragend', function (e) {
    e.target.classList.remove('active');
});
document.addEventListener('dragenter', function (e) {
    if (e.target.classList && e.target.classList.contains('drop')) {
        e.target.classList.add('active');
    }
});
document.addEventListener('dragleave', function (e) {
    if (e.target.classList && e.target.classList.contains('drop')) {
        e.target.classList.remove('active');
    }
});
document.addEventListener('dragover', function (e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
});
document.addEventListener('drop', function (e) {
    e.preventDefault();
    if (e.target.classList.contains('drop')) {
        e.target.classList.remove('active');
        e.target.appendChild(dragged);
    }
});
</script>

Продолжение)