<style type="text/css">
    .computer {
        width: 93px;
        height: 98px;
        background: url(https://js.cx/clipart/computer.gif) no-repeat;
        padding: 5px;
        font-style: italic;
    }
 
    .computer-smile {
        background: url(https://js.cx/clipart/computer-smile.gif) no-repeat;
    }
    </style>
    
    <h3><i>Можно легко дорабатывать данный фреймворк, добавляя ему новый функционал</i></h3>
    <ul>
        <li>Возможность захвата элемента только за определенную часть</li>
        <li>Возможность положить в определенное место droppable</li>
        <li>Подсветка текущего droppable</li>
        <li>Анимация отмены переноса</li>
    </ul>
    <div class="container">
        <div class="draggable_elems">
            <img class='draggable' src="https://js.cx/browsers/chrome.svg" alt="chrome">
            <img class='draggable' src="https://js.cx/browsers/firefox.svg" alt="firefox">
            <img class='draggable' src="https://js.cx/browsers/ie.svg" alt="ie">
            <img class='draggable' src="https://js.cx/browsers/opera.svg" alt="opera">
            <img class='draggable' src="https://js.cx/browsers/safari.svg" alt="safari">
        </div>
        <p>Переместите элементы на компьютер.</p>
        <div class='droppable computer'></div>
    </div>

var dragManager = new function() {
        var dragObject = {};
        var self = this;
 
        document.addEventListener('mousedown', mousedown);
        document.addEventListener('mousemove', mousemove);
        document.addEventListener('mouseup', mouseup);
        document.ondragstart = function(e) { return false };
 
        function mousedown(e) { // При нажатии
            if (e.which != 1) return; // Если не лкм
 
            var elem = e.target.closest('.draggable');
 
            if (!elem) return; // Если не найден draggable
 
            dragObject.elem = elem;
            dragObject.downX = e.pageX;
            dragObject.downY = e.pageY;
        };
 
        function mousemove(e) { // Движение мыши
            if (!dragObject.elem) return; // Если лкм не зажата
 
            if (!dragObject.avatar) { // Если аватар еще не создан
                var moveX = e.pageX - dragObject.downX;
                var moveY = e.pageY - dragObject.downY;
 
                if (Math.abs(moveX) < 5 && Math.abs(moveY) < 5) return; // Если перетащили меньше чем на 5 px
 
                dragObject.avatar = createAvatar(e); // Если лкм зажата и переместили достаточно создаем аватар
 
                if (!dragObject.avatar) { // Если по какой-то причине не удалось создать аватар
                    dragObject = {};
                    return
                };
 
                var coords = getCoords(dragObject.avatar); // получаем координаты аватара с учетом прокрутки
                dragObject.shiftX = e.pageX - coords.left; // запоминаем смещение
                dragObject.shiftY = e.pageY - coords.top;
 
                startDrag(e); // Подготавливаем аватар к переносу
            };
 
            // Если аватар создан, перемещаем его за курсором
            dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px';
            dragObject.avatar.style.top = e.pageY - dragObject.shiftY + 'px';
 
            return false;
        };
 
        function mouseup(e) {
            if (dragObject.avatar) { // Если есть аватар заканчиваем перенос
                finishDrag(e)
            };
 
            dragObject = {};
        };
 
        function createAvatar(e) {
            var avatar = dragObject.elem;
 
            var old = { // Запоминаем родителя, позицию и свойства для отката
                parent: avatar.parentNode,
                nextSibling: avatar.nextElementSibling,
                position: avatar.style.position || '',
                left: avatar.style.left || '',
                top: avatar.style.top || '',
                zIndex: avatar.style.zIndex || ''
            };
 
            avatar.rollback = function(e) {
                old.parent.insertBefore(avatar, old.nextSibling);
                avatar.style.position = old.position;
                avatar.style.left = old.left + 'px';
                avatar.style.top = old.top + 'px';
                avatar.style.zIndex = old.zIndex;
            };
 
            return avatar;
        };
 
        function getCoords(avatar) {
            var box = avatar.getBoundingClientRect();
            return {
                top: box.top + window.pageYOffset,
                left: box.left + window.pageXOffset
            };
        };
 
        function startDrag(e) {
            var avatar = dragObject.avatar;
 
            if (avatar.parentNode != document.body) document.body.appendChild(avatar);
            avatar.style.position = 'absolute';
            avatar.style.zIndex = 9999;
        };
 
        function finishDrag(e) {
            var dropElem = findDroppable(e);
 
            if (dropElem) {
                self.onDragSuccess(dragObject.avatar, dropElem);
            } else {
                self.onDragCancel(dragObject.avatar);
            };
        };
 
        function findDroppable(e) {
            dragObject.avatar.hidden = true; // Прячем для того, чтобы проверить над каким эл. курсор
 
            var elem = document.elementFromPoint(e.clientX, e.clientY);
 
            dragObject.avatar.hidden = false; // После получения элемента под курсором снова показываем аватар
 
            if (elem == null) return null; // В случае если курсор зашел за экран
 
            return elem.closest('.droppable');
        };
 
        // При успешном переносе
        this.onDragSuccess = function(avatar, dropElem) {
            avatar.hidden = true;
            dropElem.classList.add('computer-smile');
 
            setTimeout(function() {
                dropElem.classList.remove('computer-smile');
            }, 200);
        };
 
        this.onDragCancel = function(avatar) {
            avatar.rollback();
        };
    };

 avatar.rollback = function(e) {
                avatar.style.transitionProperty = 'all';
                avatar.style.transitionDuration = '0.2s';
                avatar.style.left = dragObject.downX - dragObject.shiftX + 'px';
                avatar.style.top = dragObject.downY - dragObject.shiftY + 'px';
           };

avatar.rollback = function(e) {
                avatar.style.transitionProperty = 'all';
                avatar.style.transitionDuration = '0.2s';
                setTimeout(function() {
                    avatar.style.left = dragObject.downX - dragObject.shiftX + 'px';
                    avatar.style.top = dragObject.downY - dragObject.shiftY + 'px';
                }, 0);
           };

 avatar.rollback = function(e) {
                avatar.style.transitionProperty = 'all';
                avatar.style.transitionDuration = '0.2s';
                avatar.style.left = dragObject.downX - dragObject.shiftX + 'px';
                avatar.style.top = dragObject.downY - dragObject.shiftY + 'px';
           };

avatar.rollback = function(e) {
                avatar.style.transitionProperty = 'all';
                avatar.style.transitionDuration = '0.2s';
                setTimeout(function() {
                    avatar.style.left = dragObject.downX - dragObject.shiftX + 'px';
                    avatar.style.top = dragObject.downY - dragObject.shiftY + 'px';
                }, 0);
           };