jquery - Jquery conditional draggable with observable?

Question

I'm trying to allow an element to be draggable only if a certain condition is met. Here's my code:

$(".folder-box").draggable({ revert: "invalid" });  // prevent this from being applied when some ko.observable property is true

I don't want to disable the element, I just want to prevent it from being draggable.

Answer 1

You have to write a custom binding handler for the draggable effect to be dependent on an observable property. Fortunately, this is as simple as this:

    ko.bindingHandlers.draggable = {
        update: function(element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            if(value) {
                $(element).draggable( { revert: "invalid" } );
            } else if($(element).data('draggable')) {
                $(element).draggable("destroy");
            }
        }
    };

You would then use it like that:

<div class="folder-box" data-bind="draggable: yourObservable"></div>