JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<div class="droppable" style="height:64px">
 <img src="https://js.cx/browsers/chrome.svg" class="draggable">
 <img src="https://js.cx/browsers/firefox.svg" class="draggable">
 <img src="https://js.cx/browsers/ie.svg" class="draggable">
 <img src="https://js.cx/browsers/opera.svg" class="draggable">
 <img src="https://js.cx/browsers/safari.svg" class="draggable">
</div>
  <p>Браузер переносить сюда:</p>
  <div class="computer droppable">
  </div>

CSS

iframe {
  width: 300px;
  height:300px;
  
}
.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;
}

.draggable {
  cursor: pointer;
}

JavaScript

function getCoords(elem) {
  var coords = elem.getBoundingClientRect();
  
  return {
    top: coords.top + pageYOffset,
    left: coords.left + pageXOffset
  };
}
var DragManager = new function() {
var dragObject = {};
var self = this;
    
document.onmousedown = function(e) {
  
  if(e.which != 1) return;
  
  var elem = e.target.closest('.draggable');
  
  if(!elem) return;
  
  dragObject.elem = elem;
  
  dragObject.coordX = e.pageX;
  dragObject.coordY = e.pageY;
  return false;
};

document.onmousemove = function(e) {
  
  if (!dragObject.elem) return;
  
  if(!dragObject.avatar) {
  
  var moveX = e.pageX - dragObject.coordX;
  var moveY = e.pageY - dragObject.coordY;
  
  if(Math.abs(moveX) < 3 && Math.abs(moveY) < 3){  return;
  }

  dragObject.avatar = createAvatar (e);
  if(!dragObject.avatar) {
    dragObject = {};
    return;
  }

  var coords = getCoords(dragObject.avatar); 
    dragObject.shiftX = dragObject.coordX - coords.left;
    dragObject.shiftY = dragObject.coordY - coords.top;
    
    startDrag(e);
  }
    dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px';
    dragObject.avatar.style.top = e.pageY - dragObject.shiftY + 'px';
    return false;
};

document.onmouseup = function(e) {
  if(dragObject.avatar) {
    finishDrag(e);
  }
  dragObject = {};
};

function finishDrag(e) {
  var dropElem = findDroppable(e);
  
  if(!dropElem) {
      self.onDragCancel(dragObject);
  } else {
    self.onDragEnd(dragObject, dropElem);
    }
}
  
function createAvatar(e) {
  var avatar = dragObject.elem;
  var old = {
    parent: avatar.parentNode,
    nextSibling: avatar.nextSibling,
    position: avatar.position || '',
    left: avatar.left || '',
    top: avatar.top || '',
    zIndex: avatar.zIndex || ''
  };
  
  avatar.rollback = function() {
    old.parent.insertBefore(avatar, old.nextSibling);
    avatar.style.position = old.position;
    avatar.style.left = old.left;
    avatar.style.top = old.top;
    avatar.style.zIndex =...