Disabling jQuery UI Widgets

It's easy to make a DOM element draggable and droppable with jQuery, but it's not as obvious how to make it stop.  It turns out every widget includes a set of standard methods, and one of the standard methods is disable. The only trick you'll learn once you read the documentation is how you invoke the method by passing the method name as a string to the widget's constructor function.

As an example, consider a div you want to be draggable until something happens, like a button click.

<div id="draggable">Drag me around</div>
<input type="button" id="stop" value="Stop!" />

<script type="text/javascript">
    $(function () {
        var div = $("#draggable").draggable();       
        $("#stop").click(function () {
            div.draggable("disable")
               .text("I can no longer move");
        });
    });
</script>

Try it out here: http://jsfiddle.net/NMUxc/