Edit this page


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

Example - modify draggable hint and dropTarget element

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

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

      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


  .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; }

Event Data

e.draggable kendo.ui.Draggable

The Draggable instance that enters the drop target.

e.dropTarget jQuery

The DropTarget element.

e.target Element

The Draggable element.

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

Give article feedback

Tell us how we can improve this article