JSFiddle - React, Tailwind, and code Playground

by berandorFiddle

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div style="padding: 10px">
    <div class="dragMe" title="drag onto section and drop to add" >drag ></div>  
</div>
<div style="padding: 10px">
    <div class="dragRight" title="drag onto section and drop to add"></div>
</div>

CSS

.dragMe {
    padding: 2px 2px 1px 3px;
    width: 38px;
    height: 16px;
    background: #cccccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    font-size: .8em;
    font-family: arial;
    -moz-box-shadow: 0 0 5px #9d9d9d;
    -webkit-box-shadow: 0 0 5px #9d9d9d;
    -o-box-shadow: 0 0 5px #9d9d9d;
    box-shadow: 0 0 5px #9d9d9d;
}
.dragMeHover {
    -moz-box-shadow: 0 0 5px #002200;
    -webkit-box-shadow: 0 0 5px #002200;
    -o-box-shadow: 0 0 5px #002200;
    box-shadow: 0 0 5px #002200;
    cursor: move;
    background: #acacac
}

.dragMeHollow {
    background: #ececec;
    border-color: #cbcbcb;
}


.dragRight {
    cursor: move;
    border: 1px solid #ff8000;
    width: 18px;
    height: 16px;
    margin-left: 3px;
    margin-top: 1px;
    top: 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 0 5px #9d9d9d;
    -webkit-box-shadow: 0 0 5px #9d9d9d;
    -o-box-shadow: 0 0 5px #9d9d9d;
    box-shadow: 0 0 5px #9d9d9d;
    background: #ffcc00 url(https://dl.dropbox.com/u/13205311/dragRight_12.png) 50% 50% no-repeat;
    vertical-align: middle;
    opacity: .3;
    filter:alpha(opacity=30);
}


.dragRightHollow {
    cursor: default;
    background: #ececec;
    border-color: #cbcbcb;
}

.dragRightHover {
    opacity: 1;
    filter:alpha(opacity=100);
}

JavaScript

function dragStartCategory(event) {
    event.currentTarget.addClass('dragRightHollow');
}

function dragEndCategory(event) {
    event.currentTarget.removeClass('dragRightHollow');
}

function dragStartTag(event) {
    event.currentTarget.addClass('dragMeHollow');
    event.currentTarget.html('');
}

function dragEndTag(event) {
    event.currentTarget.removeClass('dragMeHollow');
    event.currentTarget.html('drag >');
}

$(function() {
   $('.dragMe').live('mouseover mouseout', function (event) {
    /* drag text box */
    if ( event.type == 'mouseover') {
            $(this).addClass('dragMeHover');
        } else {
            $(this).removeClass('dragMeHover');
        }
    });
    
    /* hover on image */
    $('.dragRight').live('mouseover mouseout', function (event) {
        if ( event.type == 'mouseover') {
            $(this).addClass('dragRightHover');
        } else {
            $(this).removeClass('dragRightHover');
        }
    });
    
    /* drag image */
    $('div.dragRight').kendoDraggable({
        hint: function (element) {
            return element.clone();
        },
        dragstart: dragStartCategory,
        dragend: dragEndCategory
    });
    
    /* drag image */
    $('.dragMe').kendoDraggable({
        hint: function (element) {
            return element.clone();
        },
        dragstart: dragStartTag,
        dragend: dragEndTag
    });
});