jquery sortable plugin with “sliding effect”?

问题:

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 elements that changes position pop/jump to its new position, I'd like them to "slide" to that new position instead. By other words, make it a bit more smoother.

I've searched the 'net for three days now and havn't found one plugin that does that (!?!??). I mean come on, there must be one, right?

I've also tried to modify the code a bit on my own, and I got it to work sort of (by cloning the element, slide the clone to the new position, then delete the clone. meanwhile I'm hiding the original element and unhide it after deleting the clone). But it doesn't work very well, and I thought there must be a better one out there somewhere!

So I'm really begging for help. Either modifying help, or if you've seen a plugin that does this, please (:

回答1:

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

回答2:

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"

回答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?