New to Kendo UI for jQueryStart a free 30-day trial

Dragleave

events

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.

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.

<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>
Not finding the help you need?
Contact Support