Fired when draggable moves over one of the drop targets. The dragenter event represents a jQuery mousemove event and contains all the event data of the jQuery Event Object.

Example - modify the hint element on dragenter

<div id="area">
  <div id="leftArea"></div>
  <div id="rightArea"></div>
<div class="purple"></div>
<div class="purple"></div>

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

    filter: "#leftArea, #rightArea",
    dragenter: function(e) {
      e.draggable.hint.css("opacity", 0.3);
    dragleave: function(e) {
      e.draggable.hint.css("opacity", 1);

    width: 50px;
    height: 50px;
    border: 2px solid green;
    margin: 5px;
    display: inline-block;
  .purple { background-color: purple; }
  #area {
      width: 300px;
      height: 300px;
      line-height: 300px;
      background-color: gray;
  #leftArea, #rightArea {
    width: 140px;
    height: 100px;
    border: 2px solid green;
    margin: 2px;
    background-color: orange;
    display: inline-block;
    vertical-align: middle;

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