Edit this page


Triggered only when holdToDrag is set to true. Fired before the dragStart event. The hold event represents a jQuery mousedown event and contains all the event data of the jQuery Event Object.

Example - hold to drag

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

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

  #draggable {
    width: 50px;
    height: 50px;
    background-color: orange;
    border: 2px solid green;

Event Data

e.sender kendo.ui.Draggable

The Draggable instance which fired the event.

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