JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div id="containment-wrapper">
    <div id="draggable3" class="draggable ui-widget-content" data-id='XXX'><img class='drag_handle' src='http://www.mricons.com/store/png/123230_42205_48_arrow_cursor_drag_icon.png' /><p>my name is XXX</p><p>can't drage me using this</p></div>
<div id='listContainer'>
    <a href='#' id='sUp' class='scrollTriggers'><i class="icon-chevron-up"></i></a>
    <div id='div'>
        <ul>
            <li data-list="ABC" class="droppable">ABC</li>
            <li data-list="123" class="droppable">123</li>
            <li>first</li>
            <li>first</li>
            <li>first</li>
            <li>first</li>
            <li>first</li>
            <li>first</li>
            <li>first</li>
            <li>first</li>
            <li>first</li>
            <li>first</li>
            <li data-list="6x6" class="droppable">first</li>
        </ul>
    </div>
<a href='#' id='sDown' class='scrollTriggers'><i class="icon-chevron-down"></i></a>

</div>
</div>

CSS

#containment-wrapper {
    width: 95%;
    height:550px;
    border:2px solid #ccc;
    padding: 10px;
    position:relative;
}
#draggable3 {
    position:relative;
    width: 240px;
    height: 320px;
    padding: 0.5em;
    float: right;
    margin: 0 10px 10px 0;
}
.drag_handle{
    position:absolute;
    z-index:0;
    top:0;
    left:0;
    width:25px;
    cursor:pointer;
}
#listContainer {
    position:fixed;
    display:none;
    top:80px;
    left:80px;
    width:175px;
}
.scrollTriggers{
    position:relative;
    z-index:1;
    width: 150px;
    display: inline-block;
    height: 24px;
    background: #CCC;
    border: 1px solid #444;
    text-align: center;
}
.scrollTriggers:hover{
    background:red;
}
#div {
    position:relative;
    display:inline-block;
    height:260px;
    width:163px;
    overflow:hidden;
}
ul {
    display:inline-block;
    position:relative;
    margin:0;
    padding:0;
}
li {
    position:relative;
    width:150px;
    height:40px;
    margin:0;
    padding:0;
    margin-top:2px;
    background:#ccc;
    color:#777;
    list-style:none;
    border:1px solid #444;
}

JavaScript

$('#sUp').on('mouseenter', uscroll);
$('#sDown').on('mouseenter', dscroll);
$('#sUp,#sDown').on('mouseleave', function () {
    $('#div').stop();
});

function uscroll() {
    $('#div').animate({
        scrollTop: '-=20'
    }, 100, uscroll);
}

function dscroll() {
    $('#div').animate({
        scrollTop: '+=20'
    }, 100, dscroll);
}


$("#draggable3").draggable({
    containment: "#containment-wrapper",
    zIndex: 1,
    handle: "img.drag_handle",
    scroll: false,
    cursorAt: { left: -5, top:-5 },
    helper: "clone",
    opacity: 0.5,
    revertDuration: 200,
    start: function(event, ui) { $(this).effect("highlight", {}, 1000); },
    revert: function (event) {
        $("#div").scrollTop(0);
        $("#listContainer").fadeOut('fast');
        return true;
    },
    drag: function (event) {
        $("#listContainer").fadeIn('fast');
    }
});

$(".droppable").droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    tolerance: "pointer",
    drop: function (event, ui) {
        alert(ui.draggable.attr('data-id') + " went into " + $(this).attr('data-list'));
        $(this)
            //.addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
        $("#div").scrollTop(0);
        $("#listContainer").fadeOut('fast');
    }
});