Draggable

by Bacher

HTML

<div id="draggable" class="ui-widget-content">
    <p>AWESOME</p>
</div>
    
<button id="enable" type="button">Enable</button>
<button id="disable" type="button">Disable</button>

CSS

div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}

JavaScript

// set draggable functionality to div tag
$('#draggable').draggable({
    //helper: function() { return '<span>DRAGTEXT</span>' },
    cursor: 'pointer'
});

// when button clicked ...
$('#enable').click(function() {
    $("#draggable").draggable({ disabled: false });
});

// when button clicked ...
$('#disable').click(function() {
    $("#draggable").draggable({ disabled: true });
});

setTimeout(function() {
    $("#draggable").draggable('destroy');
    setTimeout(function() {
        $(document).trigger('mouseup');
    }, 1000);
}, 4000);