JSFiddle - React, Tailwind, and code Playground

by coolanuj

HTML

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Droppable - Shopping Cart Demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
    h1 { padding: .2em; margin: 0; }
    #products { float:left; width: 500px; margin-right: 2em; }
    #cart { width: 200px; float: left; margin-top: 1em; }
    /* style the list to maximize the droppable hitarea */
    #cart ol { margin: 0; padding: 1em 0 1em 3em; }
    </style>
    <script>
    
    </script>
</head>
<body>
    
    
    
    
<div id="catalog" style = "bottom :20px;" >
     <ul  style="left: -37px;width=500%;">
     <li class="ui-state-default" style="width: 400px; color: #313b3b;">I should be able to login page,values should be entered</li>
     <li class="ui-state-default" style="width: 400px;color: #313b3b" >I should be able to register,values should be entered</li>
   <li class="ui-state-default" style="width: 400px;color: #313b3b">I should be able to enter name,values should be entered</li>
     </ul>
       </div>
                         
<div id="dialogIteration"   >
 <div class="ui-widget-content">
        <ol>
            <li class="placeholder" style="height: 175px;">Add your stories here</li>
        </ol>
    </div>
</div>

</body>
</html>

CSS

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }

JavaScript

$(function() {

                     $( "#catalog ul" ).sortable({
                         zIndex: 10000,
                            revert: true
                        });
                     $( "#catalog" ).accordion();
                      $( "#catalog ul" ).draggable({
                            appendTo: "body",
                            helper: "clone",
                            zIndex: 10000
                        });
                  
                      $( "#dialogIteration ol" ).droppable({
                          
                            activeClass: "ui-state-default",
                            hoverClass: "ui-state-hover",
                            accept: ":not(.ui-sortable-helper)",
                            drop: function( event, ui ) {
                                $( this ).find( ".placeholder" ).remove();
                                $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
                            }
                        }).sortable({
                            items: "li:not(.placeholder)",
                            sort: function() {
                                
                                // gets added unintentionally by droppable interacting with sortable
                                // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                                $( this ).removeClass( "ui-state-default" );
                            }
                        });
                    
                   
                        $( "ul, li" ).disableSelection();
                        $("#dialogIteration").dialog(); 
                    });