cancelHold

Has effect only when holdToDrag is set to true. Cancels the activated state of the widget, caused by pressing and holding.

Example - cancel activated draggable

<p>Hold the draggable square to activate it...</p>

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

<p><button type="button" class="k-button" id="cancel">Cancel Draggable activated state</button></p>

<script>
  $("#cancel").click(function() {
      $("#draggable").data("kendoDraggable").cancelHold();
      $("#draggable").removeClass("active-draggable");
  });

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

<style>
  #draggable {
    width: 200px;
    height: 200px;
    background: #f90;
    border: 2px solid #c30;
  }

  #draggable.active-draggable {
    background: #f00;
  }
</style>
In this article
Not finding the help you need? Improve this article