JSFiddle - React, Tailwind, and code Playground

by dhoerster

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/black-tie/jquery-ui.css">
<div class='card'>drag me</div>

<div class='deck'>drop here<p></p></div>

CSS

.card{
    width: 100px;
    height: 100px;
    background-color: WhiteSmoke;
}

.deck{
    width: 500px;
    height: 300px;
    background-color: Yellow;
}

JavaScript

$(document).ready(function() {
    $(".card").draggable({
        //revert: "invalid",
        snap: "true",
        snapMode: "inner"
    });
    $(".deck").droppable({
        //tolerance: "intersect",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function(event, ui) {
            $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
        }
    });
});