JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<body>
        <h1>Playlist</h1>
        <ul class="playlist ui-sortable ui-droppable">
                    
        </ul>
        <h1>Media Pool</h1>
        <ul class="mediapool">
            <li class="template ui-resizable ui-draggable">medium1</li>
            <li class="video ui-resizable ui-draggable">medium2</li>
            <li class="video ui-resizable ui-draggable">medium3</li>
            <li class="template ui-resizable ui-draggable">medium4</li>
            <li class="template ui-resizable ui-draggable">medium5</li>    
        </ul>
    
</body>

CSS

/*!
 * jQuery UI CSS Framework 1.8.21
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*!
 * jQuery UI CSS Framework 1.8.21
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit...

JavaScript

$(function() {
    $('.playlist').sortable({ });
    //$('.template, .video').resizable();
    
    $( '.mediapool li' ).draggable({
        connectToSortable: '.playlist',
        helper: 'clone'
    });


    $('.playlist').droppable({
        
        drop: function(e,ui) {
          var element = $(ui.draggable);
          element.resizable({ containment: "parent" });
          $(this).append(element);
    
        }
    })

    $('ul,li').disableSelection();

});