New to Kendo UI for jQueryStart a free 30-day trial

Dragenter

events

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.

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.

<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>
Not finding the help you need?
Contact Support