JSFiddle - React, Tailwind, and code Playground

by escoffie

HTML

<div id="contenedor">
    <div id="llave">
        =>
    </div> 
    <div class="cerrojo">
        ?
    </div>

    Arrastre para activar
</div>

CSS

#contenedor{
    border:solid 1px black;
    background:#CCC;
    width:250px;
    height:30px;
    position:relative;
    text-align:center;
    font-family:Arial, Sans-serif;
}
#llave{
    width:48px;
    height:28px;
    background:#FFF;
    border:solid 1px red;
    text-align:center;
    position:absolute;
    left:0;
    cursor:move;
}
.cerrojo{
    width:48px;
    height:28px;
    background:#666;
    border:solid 1px green;
    text-align:center;
    position:absolute;
    right:0;
}

JavaScript

var abrir = new Drag.Move('llave', {
    droppables: '.cerrojo',
    container:'contenedor',
    onEnter: function(element, droppable, event){
        if(!droppable) {
            alert("Nada"); 
        }else {
            alert("Tocado");
        }
    }
});