Making stopProagation work on html buttonclick

Question

I have a draggable div and an html button.

I want the div to stop being draggable using stopPropagation when the button is clicked, but for some reason the draggable event is still working.

can anyone have a look at my jsfiddle and see where I am going wrong

here's the jsfiddle http://jsfiddle.net/Dp2z6/3/

and the code

#draggablediv {
 background-color:#ff0000;
 width:100px;
 height:100px;
 top:50px;
 left:50px;
}

#editBtn {
 font-size:12px;
}

$(function () {
  $("#draggablediv").draggable();
});

$('#editBtn').click(function (event) {
  event.stopPropagation();
  focusDiv();
});

function focusDiv() {
  $('#draggablediv').focus();
}

<div id="draggablediv">draggable Div
 <br>
 <input type="button" id="editBtn" value="click me">
</div>

Answer 1

It sounds like what you want is to do is stop the draggable behavior when the button is clicked. event.stopPropagation(); will only prevent the events on the button from bubbling up to the parent div, but it won't affect what happens if you click on the draggablediv directly.

You'll want to use the either the disable or destroy draggable widget methods to stop the draggable behavior. You can read about the difference between them on the API page for the draggable widget.

$('#editBtn').click(function (event) {
    $("#draggablediv").draggable('destroy')
    focusDiv();
});

Working Demo

Answer 2

Your stopPropogation() is stopping propagation of the click event.

To remove the draggability (totally a word), use .draggable('destory').

$('#editBtn').click(function (event) {
    event.stopPropagation();
    $('#draggablediv').draggable( 'destroy' );
    focusDiv();
});

JsFiddle.

Note: You could also use .draggable('disable'), but this comes with an odd CSS side effect that may or may not be desirable. It does provide useful feedback to the user that the element has, in fact, been disabled.