New to Kendo UI for jQuery? Start a free 30-day trial

Hold

events

Fired before the dragStart event. The hold event represents a jQuery mousedown event and contains all the event data of the jQuery Event Object.

Important

As of the Kendo UI R3 2019 SP1 release, setting the holdToDrag option to false does not cancel the hold event.

hold

Event Data

e.sender `kendo.ui.Draggable`

The Draggable instance which fired the event.

e.target `Element`

The draggable element.

<div id="draggable"></div>

<script>
  $("#draggable").kendoDraggable({
    holdToDrag: true,
    hold: function(e) {
        $("#draggable").css("background", "red");
    },
    hint: function(element) {
      var hintElement = $("<div id='hint'></div>");
      hintElement.css({
        "background-image": "url('https://demos.telerik.com/kendo-ui/content/web/combobox/tShirt.png')",
    	"width": "248px",
    	"height": "289px"
      });
      return hintElement;
    }
  });
</script>

<style>
  #draggable {
    width: 50px;
    height: 50px;
    background-color: orange;
    border: 2px solid green;
  }
</style>

Hold

hold

Event Data

e.sender kendo.ui.Draggable

e.target Element

e.sender `kendo.ui.Draggable`

e.target `Element`