Edit this page


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.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article