如何使用可拖动和可排序的jQuery？

Question

如何使用可排序的jquery拖拽..我想拖动是拖动和aslo项目移动............................... ........

<div class="container">
    <div class="smallitems">

  <div class="dragimage">
    <a href="#select1" class="lablecircle active">1</a>
 </div>
 <div class="dragimage">
    <a href="#select1" class="lablecircle">2</a>
 </div>
 <div class="dragimage">
    <a href="#select3" class="lablecircle">3</a>
 </div>
  <div class="dragimage">
    <a href="#select4" class="lablecircle">4</a>
 </div>
 <div class="dragimage">
    <a href="#select5" class="lablecircle">5</a>
 </div>
 <div class="dragimage">
    <a href="#select1" class="lablecircle">6</a>
 </div>
 <div class="dragimage">
    <a href="#select7" class="lablecircle">7</a>
 </div>
 <div class="dragimage">
    <a href="#select8" class="lablecircle">8</a>
 </div>
</div>    
  <div class="items">
    <div class="item"><span class="lablecircle" id="select1">1</span></div>
    <div class="item"><span class="lablecircle" id="select2">2</span></div>
    <div class="item"><span class="lablecircle" id="select3">3</span></div>
    <div class="item"><span class="lablecircle" id="select4">4</span></div>
     <div class="item"><span class="lablecircle" id="select5">5</span></div>
    <div class="item"><span class="lablecircle" id="select6">6</span></div>
    <div class="item"><span class="lablecircle" id="select7">7</span></div>
    <div class="item"><span class="lablecircle" id="select8">8</span></div>
 </div>
</div>

这个原始的...在可拖动之前...

这个原始的...在可拖动之后......

http://jsfiddle.net/kisspa/4p3Aa/

Answer 1

我认为你应该使用jQuery UI，我想你知道它并且在提到 sortable jQuery 时就是这个意思。使用jQuery UI，代码可以很简单：

var oldIndex;
$('.smallitems').sortable({
  start: function(e,ui){
    oldIndex = ui.item.index();
  },
  stop: function(e,ui){
    var newIndex = ui.item.index();
    var largeItems = $('.items').children();
    if(newIndex > oldIndex)
        largeItems.eq(newIndex).after(largeItems[oldIndex]);
    else 
        largeItems.eq(newIndex).before(largeItems[oldIndex]);
  }
});

我们可以在oldIndex事件处理程序中保存已拖动项目的sortstart，然后在sortstop事件处理程序中，我们可以从索引中获取newIndex更改后，我们可以通过.after和.before方法轻松地在大型列表中重新定位新项目。

Demo.