JqueryUI Drag e Drop

by Jader Wagner

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
    <p class="device-profiles" data-color="teste1">Drag me to my target</p>
    <p class="device-profiles" data-color="teste2">Drag me to my target</p>
    <p class="device-profiles" data-color="teste3">Drag me to my target</p>
</div>
<div id="droppable" class="mediaplayer-profiles ui-widget-content">
    <p>Drop here</p>
</div>
<div id="droppable" class="mediaplayer-profiles ui-widget-content">
    <p>Drop here</p>
</div>
<div id="droppable" class="mediaplayer-profiles ui-widget-content">
    <p>Drop here</p>
</div>

CSS

.teste1 {
    color: red;
}
.teste2 {
    color: green;
}
.teste3 {
    color: blue;
}

JavaScript

var dragColor; // declarar a variavel no escopo global

$(".device-profiles").each(function () {
    $(this).addClass($(this).data('color')); // colocar o data-color como class em cada elemento
}).draggable({
    revert: true,
    start: function (event, ui) {
        dragColor = $(this).data('color');
        console.log("dragColor: " + dragColor);
    }
});

$(".mediaplayer-profiles").droppable({
    drop: function (event, ui) {
        $(this).removeClass($(this).data('color')).data('color', dragColor).addClass(dragColor);
    }
});