JSFiddle - React, Tailwind, and code Playground

by laurenty

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css">
<div id="container" style="background-color: #EEEEEE">
    Without draggable. Selectable works with lasso and click.
    <div class="drag">Select Me 1</div>
    <div class="drag">Select Me 2</div>
    <div class="drag">Select Me 3</div>
</div>

<div id="container2" style="background-color: #CCCCCC">
    With draggable. Selectable with lasso only.
    <div class="drag2">Drag Me 1</div>
    <div class="drag2">Drag Me 2</div>
    <div class="drag2">Drag Me 3</div>
</div>

CSS

.drag, .drag2 {
   border: 1px solid black; 
   margin: 5px;
   width: 75px;
}

.ui-selected {
    background-color: red;
}

JavaScript

$(document).ready(function() {
    $('#container').selectable({filter: '.drag'});
    $('#container2').selectable({filter: '.drag2'});
    $('.drag2').draggable();
});