jQuery对元素进行拖动并重新排序？？

像淘宝上面那样，鼠标悬停时单击左右按钮和删除按钮。单击左边时，原来图片会向向移动，向左的图片会引用到原来的位置。

传送门
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>

<li class="pic0">
    <img src="//192.168.0.3:8888/resource/image/1.jpg" id="cart-1">
        <div class="operate">
            <i class="toleft">左移</i>
            <i class="toright">右移</i>
            <i class="del" data-id="1">删除</i>
        </div>
</li>
<li class="pic1">
    <img src="//192.168.0.3:8888/resource/image/2.jpg" id="cart-2">
        <div class="operate">
            <i class="toleft">左移</i>
            <i class="toright">右移</i>
            <i class="del" data-id="2">删除</i>
        </div>
</li>
<li class="pic2">
    <img src="//192.168.0.3:8888/resource/image/3.jpg" id="cart-3">
        <div class="operate">
            <i class="toleft">左移</i>
            <i class="toright">右移</i>
            <i class="del" data-id="3">删除</i>
        </div>
</li>
<li class="pic3">
    <img src="//192.168.0.3:8888/resource/image/4.jpg" id="cart-4">
        <div class="operate">
            <i class="toleft">左移</i>
            <i class="toright">右移</i>
            <i class="del" data-id="4">删除</i>
        </div>        
</li>
<li class="pic4">
    <img src="//192.168.0.3:8888/resource/image/5.jpg" id="cart-5">
        <div class="operate">
            <i class="toleft">左移</i>
            <i class="toright">右移</i>
            <i class="del" data-id="5">删除</i>
        </div>    
</li>

</ul>

  $(".toright").click(function(){

  });
 $(".toleft").click(function(){
       
  });
  $(".del").click(function(){
      // var $this=$(this),
      // id=$this.data('id'),
      // $parent=$("#cart-"+id);
      // $parent.fadeOut();
      $("#cart-"+$(this).data('id')).remove()
  });

</script>

</body>
</html>
index()可以获取到某个元素在兄弟节点中的位置，先获取到你点击的那个图片在同级节点中的位置，让位置减一，获取到减一后位置的元素的ID，再把这个元素插入到那个元素前面去，就左移了
这个写法是怎么写啊？

建议用Model > View的方法，把LI对象先保存到不可见的数据层中，要移位时先在数据层的数组的排序好，然后把UL清空，把新顺序的LI写进UL上。

先保存当前位置：

window.arr = [];
$('ul > li.pic').each(function(i){
  $('.left', this).on('click', function(){
    liOnClick('left', i);
  });
  $('.right', this).on('click', function(){
    liOnClick('right', i);
  });
  window.arr.push(this);
});

处理向左向右事件：

function liOnClick(direction, i){
  var temp;
  if(direction == 'left') {
    temp = window.arr[i];
    window.arr[i] = window.arr[i-1];
    window.arr[i-1] = temp;
  }
  if(direction == 'right') {...}
  liRender();
}

重绘LI

function liRender() {
  $('ul').empty();
  $.each(window.arr, function(){
   $('ul').append(this);
  });
}

以上为大概的代码，仅供参考，不保证运行正常。

有个Js插件叫sortable，实现鼠标拖动重新排序，功能挺强大实用的，也能实现类似需求

【热门文章】

jQuery对元素进行拖动并重新排序 ？？

jQuery对元素进行拖动并重新排序？？