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>

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

  #draggable {
    width: 200px;
    height: 200px;
    background: #f90;
    border: 2px solid #c60;
In this article