建议用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，实现鼠标拖动重新排序，功能挺强大实用的，也能实现类似需求