JSFiddle - React, Tailwind, and code Playground

by white_n_az

HTML

<div id="privileges">
  <div id="messages1" class="round">
    You can drag and drop from 'Users' to whichever 'Role' you want to assign to that user.<br /> <br />You can remove a 'Role' by dragging to the 'Users' box.
  </div>
  <div class="box">
    <div class="block">
      <h2 style="margin:0"><a href="#" style="background-position:99.3% 50%" id="toggle-user_managment">Users</a></h2>
    </div>
    <div class="block" id="users" align="left">
      <ul id="priv_users" class="ui-widget-header" align="left">
        <li id="moveable-1" class="ui-widget-content" data-add="1">cwhite</li><li id="moveable-2" class="ui-widget-content" data-add="2">test</li><li id="moveable-5" class="ui-widget-content" data-add="5">test2</li>
      </ul>
    </div>
  </div>
  <div class="box">
    <div id="privileges-1" data-role="1" class="block ui-widget-header" align="left">
      <font color="#666666" style="font-weight: bold;">LDAP People Admin</font> &raquo; Is Able to: add_group, add_member, etc...
      <ul id="role-1">
        <li id="moveable-1" class="ui-widget-content" data-add="cwhite">cwhite</li>
        <li id="moveable-50" class="ui-widget-content" data-add="test2">test2</li>
      </ul>
    </div>
  </div>
  <div class="box">
    <div id="privileges-2" data-role="2" class="block ui-widget-header" align="left">
      <font color="#666666" style="font-weight: bold;">LDAP People Create</font> &raquo; Is Able to: add_group, add_member, create, etc...
      <ul id="role-2">
      </ul>
    </div>
  </div>
</div>

CSS

.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border:1px solid #000;
  }


.ui-selectable-helper div {
    opacity:0.1;
    filter: alpha(opacity=10);
    width:auto;
    height:auto;
    background-color:#000;
  }


.ui-draggable-dragging {
    z-index:9999;
  }


#draggable {
    background-color : #d6826b;
    float : left;
    height : 24px;
    margin-bottom : 10px;
    margin-left : 10px;
    margin-right : 10px;
    margin-top : 10px;
    padding-bottom : 0.5em;
    padding-left : 0.5em;
    padding-right : 0.5em;
    padding-top : 0.5em;
    width : 100px;
  }


#droppable {
    background-color : #222;
    float : left;
    height : 150px;
    margin-bottom : 10px;
    margin-left : 10px;
    margin-right : 10px;
    margin-top : 10px;
    padding-bottom : 0.5em;
    padding-left : 0.5em;
    padding-right : 0.5em;
    padding-top : 0.5em;
    width : 150px;
  }

#droppable2 {
    background-color : #ccc;
/*    float : left;
    height : 150px; */
    margin-bottom : 10px;
    margin-left : 10px;
    margin-right : 10px;
    margin-top : 10px;
    padding-bottom : 0.5em;
    padding-left : 0.5em;
    padding-right : 0.5em;
    padding-top : 0.5em;
    width : 250px;
  }

#unassigned_users {
    background-color : #ccc;
/*    float : left;
    height : 150px; */
    margin-bottom : 10px;
    margin-left : 10px;
    margin-right : 10px;
    margin-top : 10px;
    padding-bottom : 0.5em;
    padding-left : 0.5em;
    padding-right : 0.5em;
    padding-top : 0.5em;
    width : 250px;
  }
.box {
    background:#ddd;
    margin-top:10px;
    margin-bottom:10px;
    padding:10px 10px 1px 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
  }


.box h2 {
    font-size:1em;
    font-weight:normal;
    text-transform:uppercase;
    color:#fff;
    background:#333;
    margin:-10px -10px 0 -10px;
    padding:6px 12px;
  }


.box h2 a,.box h2 a.visible {
    color:#fff;
    background:#666...

JavaScript

function attach() {
    $("[id^=privileges-]").droppable({
        drop: function(event, ui) {
            $(this).addClass("ui-state-highlight");
            $.post("/permissions/add_member/", {
                "uid": ui.draggable.attr("data-add"),
                "id": $(this).attr("id")
            }, function(data) {
                var html = $(data);
                $("#priv_users").empty().append(html.closest("#priv_users").children());
                $(addpriv).empty().append(html.closest(addpriv).children());
                $("#messages1").replaceWith(html.closest("#messages1"));
            });
        }
    });
}

$(function() {
    $("#priv_users").on("mouseenter", function() {
        !$("li:first", this).hasClass("ui-draggable") && $("li", this).draggable();
    });
    attach();
});