dragenter

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>

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

  $(".target").kendoDropTarget({ 
      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

      }
  });

</script>
<style>
  .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; }
</style>

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.

In this article
dragenter
Not finding the help you need?
Contact Support