jQuery sortable() is not working after $(document).unbind('mousemove')

Question

The jQuery Sortable() is working well, and if I try to destroy and create the sortable, also working well. but if try to $(document).unbind('mousemove') and recreate sortable, it only works once and then never work. I know I can change the code; but I want to know why.

Here is the code below, also on jsfiddle (http://jsfiddle.net/webjjin/YJEf5/)

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<div id="container"> 
<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
</div>
<button id="btn">Destroy and create</button>
<button id="unbind">Unbind</button>

<script>$("#sortable").sortable();</script>
<script>
var html = $('#container').html();
$('#btn').click(function(){
    $("#sortable").sortable('destroy');
    $('#container').empty();
    setTimeout(function(){
        $('#container').append(html);
        
        $("#sortable").sortable();
    }, 500);
});
$('#unbind').click(function(){
    jQuery(document).unbind('mousemove').unbind('mouseup');
})
</script>

Sortable needs to track the mouse position in order to enable you dragging the objects. Same with returning false on click and file input boxes, they stop working. If you have a function tracking the mouse, you could add a global variable that enables/disables your function. I.e. `window.notrack=true;`, within your function (on its very top): `if (window.notrack) { return false; }` — Chris S., May 31 '13 at 02:43
FYI as of jQuery 1.7, the .off() method is preferred to .unbind() to remove event handlers on elements. — j08691, May 31 '13 at 02:43
@why do you want to remove all the event handlers, why can't you just [disable](http://api.jqueryui.com/sortable/#method-disable) the sortable — Arun P Johny, May 31 '13 at 03:29
For the test, go to http://jsfiddle.net/webjjin/YJEf5/ and then try sorting(working well) -> destroy button -> sorting(working once) -> Destroy and create botton(should be working, but not) — Dai-Hyun Lim, May 31 '13 at 05:17

score 4 · Answer 1 · answered May 31 '13 at 03:22

4

With this code,

jQuery(document).unbind('mousemove').unbind('mouseup');

you are removing ALL mousemove and mouseup event listeners on the page which is essential to jQuery sortable. It is used on functions like tracking the position where the dragged element is hovered or dropped. So unbinding it will break the whole process.

If you want to unbind these eventlisteners, use a specific selector:

$('#test').unbind('mousemove').unbind('mouseup');

answered May 31 '13 at 03:22

Jude Duran

2,195
2
25
41

1

then again calling `.sortable()` should re-register those events right? – Arun P Johny May 31 '13 at 03:27
1

for some reasons, sortable() doesn't bind `mouseup`. it remains unbound even after sortable() was called. – Jude Duran May 31 '13 at 03:44
It should re-sortable() after unbinding. why I need to jQuery(document).unbind('mousemove') is that there several other components what they doesn't provide destroy method. but I need to destroy and empty all of them and then redraw/repainting. so I used jQuery(document).unbind('mousemove') because I don't want to mind where are events attached. – Dai-Hyun Lim May 31 '13 at 05:12

score 1 · Answer 2 · answered May 31 '13 at 05:41

1

Finally I found the cause.

in the jQuery-ui file. There is this code.

var mouseHandled = false;
$( document ).mouseup( function() {
mouseHandled = false;
});

and _mouseDown function check like this,

if( mouseHandled ) { return; }

That why if try jQuery(document).unbind('mouseup'), sortable widget doen't work include other jquery-ui widgets.

Thank you everyone.

answered May 31 '13 at 05:41

Dai-Hyun Lim

209
2
7

but here is other questions. anyhow somepeople can jQuery(document).unbind('mouseup'). why jquery-ui doen't provide re-register the mouseup event above? – Dai-Hyun Lim May 31 '13 at 05:51
once execute jQuery(document).unbind('mouseup'). it will be never come back... -_-! – Dai-Hyun Lim May 31 '13 at 05:52

jQuery sortable() is not working after $(document).unbind('mousemove')

2 Answers2