hold

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.

Example - hold to drag

<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>

Event Data

e.sender kendo.ui.Draggable

The Draggable instance which fired the event.

e.target Element

The draggable element.

In this article
Not finding the help you need? Improve this article