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