dragleave

Fired when draggable moves out of the drop target. The dragleave event represents a jQuery mousemove event and contains all the event data of the jQuery Event Object.

Example - modify draggable hint and dropTarget element

<div class="draggable orange"></div>
<div class="target orange"></div>

<script>
  $(".draggable").kendoDraggable({
    hint: function(element) {
      return element.clone();
    }
  });

  $(".target").kendoDropTarget({ 
      dragenter: function(e) {
          e.draggable.hint.css("opacity", 0.5); //modify the draggable hint
          e.dropTarget.removeClass("orange").addClass("purple"); //modify dropTarget element
      },
      dragleave: function(e) {
          e.draggable.hint.css("opacity", 1); //modify the draggable hint
          e.dropTarget.removeClass("purple").addClass("orange"); //modify dropTarget element

      }
  });

</script>
<style>
  .draggable {
    width: 50px;
    height: 50px;
    border: 2px solid green;
    margin: 5px;
  }
  .target {
    width: 200px;
    height: 200px;
    border: 2px solid green;
    margin: 5px;
  }
  .orange { background-color: orange; }
  .purple { background-color: purple; }
</style>

Event Data

e.draggable kendo.ui.Draggable

The Draggable instance that leaves the drop target.

e.dropTarget jQuery

The DropTarget element.

e.target Element

The Draggable element.