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:
- Initialize the Drag and Drop feature on the parent container.
- Use a filter to specify which items will be draggable.
- 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>