Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<div class="group nested_1" id="group_1">Primary
<div class="role" id="role_1">Developer: admin</div>
</div><br>
<div class="group nested_2" id="group_2">Secondary 1
<div class="role" id="role_2">Worker 1: Employee1</div>
</div><br>
<div class="group nested_2" id="group_3">Secondary 2
<div class="role" id="role_3">Worker 2:   Employee2</div>
</div>
 
.group {
    background-image: -moz-linear-gradient(center bottom , #EEEEEE 0%, whitesmoke 100%);
    border: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    display: inline-block;
    margin: 8px 0;
    padding: 8px 15px;
    white-space: nowrap;
    width: auto;
}
.drop-hover {
    background-image: -moz-linear-gradient(center bottom , white 0%, whitesmoke 100%);
    border-radius: 1px 1px 1px 1px;
}
.group_head {
    font-weight: bold;
}
.nested_1 {
    margin-left: 0;
}
.nested_2 {
    margin-left: 30px;
}
 
(function() {
    $(".role").draggable({
        revert: 'invalid',
        distance: 10
    });
    $(".group").droppable({
        accept: ".role",
        tolerance: 'touch',
        greedy: true,
        hoverClass: "drop-hover",
        drop: function(event, ui) {
            var group_id, role_id, update_data;
            return $(this).append(ui.draggable.css({
                position: "relative",
                top: "",
                left: ""
            }));
        }
    });
}).call(this);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers