JSFiddle - React, Tailwind, and code Playground

by itaylor

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"></meta>
    <title>draggable=true transform webkit bug</title>
  </head>
  <body>
    <div id="spacer">
      <div id="dragElem" draggable="true">Drag me</div>
    </div>
  </body>
</html>

CSS

#spacer {width:300; margin:200px auto; background:#ccc;}
#dragElem {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    text-align:center; 
    width:200px; height:100px; background:pink; border:1px solid red;
}

JavaScript

document.getElementById("dragElem").addEventListener("dragstart", function (e){
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text', "test");
});