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>

    hint: function(element) {
      return element.clone();

      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


  .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; }

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.

In this article
Not finding the help you need? Improve this article