jquery sortable plugin with “sliding effect”?

Question

jQueryUI has got a nice plugin, Sortable: http://jqueryui.com/demos/sortable/ I\'m very pleased with that plugin but I\'m only missing one thing. And that is instead of let the

Answer 1

1. you can control it with the events options. check them out...
2. becareful with the queue because if you drag one element and then drag the other withouth the first one finishing that can look funny.
3. I would recommend you to read about .stop(), jq queue, and possibly "cancel bubble"

Answer 2

if you look at the sortable demo with placehoder and use the following code to initialize the sortable you'll see a sliding action in the placeholder

$(function() {
  $("#sortable").sortable({
    placeholder: 'ui-state-highlight',
    start: function (e,ui){        // new lines to
      $(ui.placeholder).slideUp(); // remove popping
    },                             // effect on start
    change: function (e,ui){
      $(ui.placeholder).hide().slideDown();
    }
  });
  $("#sortable").disableSelection();
});

you can change the class ui-state-highlight to anything you want to style it, you can make it invisible by using css-property visibility and set it to hidden

i made the basic example in jsbin.com so you can see what its like

EDIT: example with the popping-effect removed when you start sorting

Answer 3

You can get it to slide with:

(...).sortable({
revert : 300, ...

The number is in milliseconds for the animation. Also see similar post: In JQuery Sortable, how can I run a function before the revert animation starts?