drop

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

Example - modify the dropTarget and draggable element on successful drop

<p>Area accepts only draggable elements from orange group</p>
<div id="area">
  <div id="droptarget" class="orange"></div>
</div>
<div id="draggable" class="purple"></div>

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

  $("#area").kendoDropTargetArea({ 
      filter: "#droptarget",
      drop: onDrop
  });

  function onDrop(e) {
    e.dropTarget.toggleClass("orange").toggleClass("purple");
    e.draggable.element.toggleClass("orange").toggleClass("purple");
  }
</script>
<style>
  #draggable {
    width: 50px;
    height: 50px;
    border: 2px solid green;
    margin: 5px;
    display: inline-block;
  }
  .orange { background-color: orange; }
  .purple { background-color: purple; }
  #area {
      width: 300px;
      height: 300px;
      line-height: 300px;
      background-color: gray;
  }
  #droptarget {
    width: 100px;
    height: 100px;
    border: 2px solid green;
    margin: 0 96px;
    display: inline-block;
    vertical-align: middle;
  }
</style>

Event Data

e.draggable kendo.ui.Draggable

Reference to the Draggable instance that enters a drop target.

e.dropTarget jQuery

The current DropTarget element in the area that initiated the event.

e.target Element

The current Draggable element.

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