具有“滑动效果"的 jquery 可排序插件? [英] jquery sortable plugin with "sliding effect"?

问题描述

jQueryUI 有一个不错的插件，Sortable:http://jqueryui.com/demos/sortable/我对该插件非常满意，但我只缺少一件事.这不是让改变位置的元素弹出/跳转到它的新位置，而是希望它们滑动"到那个新位置.换句话说，让它更平滑一点.

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 (:

推荐答案

如果你看一下 sortable demo使用占位符 并使用以下代码初始化可排序，您将在占位符中看到滑动操作

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();
});

您可以将 ui-state-highlight 类更改为任何您想要的样式，您可以通过使用 css-property 可见性使其不可见并将其设置为隐藏

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

我在 jsbin.com 中做了一个基本的例子，所以你可以看看它是什么样子的

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

example 开始时移除了弹出效果排序

example with the popping-effect removed when you start sorting

这篇关于具有“滑动效果"的 jquery 可排序插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！