Fired when draggable is dropped over the drop target. The drop event represents a jQuery mouseup event and contains all the event data of the jQuery Event Object.

Example - disable draggable component after it has been dropped

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

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

      drop: function(e) {
          e.draggable.destroy(); //detach events
          e.draggable.element.css("opacity", 0.3); //change opacity

  .draggable {
    width: 50px;
    height: 50px;
    border: 2px solid green;
    margin: 5px;
    float: left;
  .target {
    width: 200px;
    height: 200px;
    border: 2px solid green;
    margin: 50px;
  .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