JSFiddle - React, Tailwind, and code Playground

by teknohippy

HTML

<div id="card1">Me a card! Innit!</div>
<div id="choice1">Choice 1</div>
<div id="choice2">Choice 2</div>
<div id="choice3">Choice 3</div>

CSS

#card1 {
    width: 150px;
    height: 250px;
    background: red;
}

#choice1, #choice2, #choice3
{
    width: 200px;
  height: 300px;  
    background: silver;
    float:left;
    margin-right: 20px;
}

JavaScript

var startX;
var startY;

$(document).ready(function() {
   $("#card1").draggable(); 
});

$( "#card1" ).bind( "dragstart", function(e, ui) {
    startX = e.pageX;
    startY = e.pageY;
});

$( "#card1" ).bind( "dragstop", function(e, ui) {
    endX = e.pageX;
    endY = e.pageY;
    
    dX = endX - startX;
    dY = endY - startY;
    
    /*$("#card1").animate(
        {
            left: '+=' + dX / 10,
            top: '+=' + dY /10
        }
        , 500
        );
   */
});