Kendo Window

by lhoeppner

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css">
<div id='dragoptions'>
    <div class="draggable dragoption" id="person-one">person one</div>
    <div class="draggable dragoption" id="person-two">person two</div>
    <div class="draggable dragoption2" id="person-three">person three</div>
    <div class="draggable dragoption2" id="person-four">person four</div>
    <div class="draggable dragoption3" id="person-five">person five</div>
</div>
<div id="targets">
    <div class="droptarget type1" id="target1">role a</div>
    <div class="droptarget type1" id="target2">role b</div>
    <div class="droptarget type2" id="target3">role c</div>
</div>

CSS

.draggable {
    width: 50px;
    height: 50px;
    border: 2px solid green;
    margin: 5px;
	background-color: white;
	cursor: pointer;
  }
  .droptarget {
    width: 100px;
    height: 100px;
    border: 2px solid green;
    margin: 5px;
	background-color: orange;
  }
  .drop {
		background-color: green;
  }
  .dragging {
		color: white;
		background-color: blue;
  }
.dragoption {
  background-color: pink;
}

JavaScript

$("#dragoptions").kendoDraggable({
    filter: ".dragoption",
    group: "roles",
    hint: function (element) {
        return $(element).clone();
    },
    dragstart: draggableOnDragStart,
    dragend: draggableOnDragEnd
});

$("#dragoptions").kendoDraggable({
    filter: ".dragoption2",
    group: "roles2",
    hint: function (element) {
        return $(element).clone();
    },
    dragstart: draggableOnDragStart,
    dragend: draggableOnDragEnd
});

$("#dragoptions").kendoDraggable({
    filter: ".dragoption3",
    group: "both",
    hint: function (element) {
        return $(element).clone();
    },
    dragstart: draggableOnDragStart,
    dragend: draggableOnDragEnd
});



$("#target1").kendoDropTarget({
    group: "roles",
    dragenter: droptargetOnDragEnter,
    dragleave: droptargetOnDragLeave,
    drop: onDrop
});

$("#target2").kendoDropTarget({
    group: "roles2",
    dragenter: droptargetOnDragEnter,
    dragleave: droptargetOnDragLeave,
    drop: onDrop
});

$("#targets").kendoDropTargetArea({
    group: "both",
    dragenter: droptargetOnDragEnter,
    dragleave: droptargetOnDragLeave,
    filter: "#target1, #target2",
    drop: onDrop
});

function draggableOnDragStart(e) {
    $(e.currentTarget).addClass("dragging");
}

function draggableOnDragEnd(e) {
    $(".draggable").removeClass("dragging");
}

function droptargetOnDragEnter(e) {
    $(e.dropTarget).addClass("drop");
}

function droptargetOnDragLeave(e) {
    $(".droptarget").removeClass("drop");
}

function onDrop(e) {
    $(".droptarget").removeClass("drop");
}