JSFiddle - React, Tailwind, and code Playground

by ghdekker

HTML

<div class="movable">verplaats mij in het vak</div>

<div class="droppable"></div>

<input type="button" value="attach droppable events" onclick="attachDroppable()"/> 

<div class="test"> hoi </div>

CSS

.droppable{ 
    border:solid 1px black; 
    width:120px;
    height:120px;       
    display:block; 
}

.movable
{
    height:15px;
    background-color: red;
    color:White;
    width:180px;
    display:inline-block;
    margin:2px;
    text-align:left;
    padding:2px;
cursor: pointer;
}

JavaScript

function attachDraggable() {
    $('.movable').draggable({
        cursor: 'move',
        helper: 'clone',
        revert: 'invalid'
    });
}

function attachDroppable() {

    $('.droppable').bind('drop', function(event, ui) {
        alert('dropped');
    });

}

$(document).ready(function() {

    attachDraggable();

    $('.test').droppable({
        drop: function(event, ui) {
            alert('bingo');
        }
    });

});