JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />   
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>    
<div id="catalog">
        <h3><a href="#">T-Shirts</a></h3>
        <div>
            <ul>
                <li>Lolcat Shirt</li>
                <li>Cheezeburger Shirt</li>
                <li>Buckit Shirt</li>
            </ul>
        </div>
        <h3><a href="#">Bags</a></h3>
        <div>
            <ul>
                <li>Zebra Striped</li>
                <li>Black Leather</li>
                <li>Alligator Leather</li>
            </ul>
        </div>
        <h3><a href="#">Gadgets</a></h3>
        <div>
            <ul>
                <li>iPhone</li>
                <li>iPod</li>
                <li>iPad</li>
            </ul>
        </div>
    </div>
<div id="cart">
    <h1 class="ui-widget-header">Shopping Cart</h1>
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
</div>

<div id="dialog-modal" title="Basic modal dialog">
    <p></p>
</div>

CSS

#dialog-modal title{
    
 background-color: #DB7448;   
}

li {
    
 border: 1px solid black;
 padding: 2px;
   margin: 2px; 
}

JavaScript

$(function() {
        $( "#catalog li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
        $( "#cart" ).droppable({
            drop: function( event, ui ) {
                $( this ).find( ".placeholder" ).remove();
//                $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
                        $( "#dialog-modal").text(ui.draggable.text()).dialog({
            height: 140,
            modal: true
        });
            }
        });
    });