Edit this page

holdToDrag Boolean (default: false)

Suitable for touch oriented user interface, in order to avoid collision with the touch scrolling gesture. When set to true, the widget will be activated after the user taps and holds the finger on the element for a short amount of time.

The draggable will also be activated by pressing, holding and lifting the finger without any movement. Dragging it afterwards will initiate the drag immediately. The activated mode can be canceled by calling cancelHold.

Example - hold to drag

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

<p id="alert" style="display:none">dragToHold activated...</p>

<script>
  $("#draggable").kendoDraggable({
    holdToDrag: true,
    hold: function(e) {
        $("#draggable").css("background", "#f00");
        $("#alert").show();
    },
    hint: function(element) {
      var hintElement = $("<div id='hint'></div>");
      hintElement.css({
        background: "#3c0",
        width: 200,
        height: 200
      });
      return hintElement;
    }
  });
</script>

<style>
  #draggable {
    width: 200px;
    height: 200px;
    background: #f90;
    border: 2px solid #c60;
  }
</style>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy