JSFiddle - React, Tailwind, and code Playground

by ansonhoyt

HTML

<div id="container" draggable="true">
    <h1>Drag Me!</h1>
    <p id="content">Your <b>amazing</b> content</p>
</div>

CSS

[draggable] {
    border: 1px solid red;
    background-color: rgba(255,0,0,0.5);
    padding: 10px;
    cursor: move;
    width: 100px;
    height: 100px;
    float: left;
}
[draggable] #content {
    display: none;
}
[draggable].dragging {
    border-style: dashed;
    opacity: 0.5;
}

JavaScript

$(function() {
    $('[draggable]').on('dragstart', function(e) {
        var content = $(this).find('#content').text();
        e.originalEvent.dataTransfer.setData('text/plain', content);
        $(this).addClass('dragging');
    });
    $('[draggable]').on('dragend', function(e) {
        $(this).removeClass('dragging');
    });
});