JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<div></div>
<span draggable="true">test</span>

CSS

div { margin-bottom: 16px; width: 200px; height: 120px; border: 1px solid red; }
span { display: inline-block; padding: 2px 10px; border: 1px solid green; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: move; }
.over { background: navy; }

JavaScript

var span = document.querySelector('span');
var div = document.querySelector('div');
span.addEventListener('dragstart', hDragStart);

function hDragStart(e) {
  this.style.opacity = '0.5';
  this.style.boxShadow = '0 0 3px rgba(0, 0, 0, 0.3)';
}