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