New to Kendo UI for jQuery? Download free 30-day trial

Enable and Disable Dragging at Runtime

Environment

Product Progress Kendo UI Drag and Drop for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I enable and disable the Kendo UI Drag and Drop functionality at runtime?

Solution

To achieve the desired scenario:

  1. Initialize the Drag and Drop feature on the parent container.
  2. Use a filter to specify which items will be draggable.
  3. Change the class of the items to enable and disable them.

The following example demonstrates the implementation of the suggested approach.

  <button id="btn">Enable/Disable</button>
  <div id="parent">
    <div class="draggable">Foo</div>
    <div class="draggable">Bar</div>
  </div>
  <script>
    $("#parent").kendoDraggable({
      filter: ".draggable:not(.disabled)",
      hint: function(element) { return element.clone(); }
    });
    $("#btn").click(function() {
      $("#parent").children().toggleClass("disabled");
    });
  </script>

See Also

In this article