jQuery列表拖动排序自定义拖动层

jQuery 的列表拖动排序功能，玩起来其实挺。你只要配合一下 jQuery UI 的 draggable 和 droppable，基本上就能实现一个比较顺滑的拖放体验。重点在于自定义那个拖动时候的“影子”层——用 helper 自定义一下，不仅样式可控，手感也能提升不少。

比如你拖着一个列表项的时候，不想原地移动，就可以让它生成一个半透明的副本，漂着走，看起来专业不少。像这样：

$(".draggableItem").draggable({
  helper: function() {
    return $(this).clone().addClass("customDragHelper").css({
      opacity: 0.5,
      width: "100px",
      height: "30px"
    });
  },
  containment: "parent",
  appendTo: "body"
});

哦对了，别忘了列表本身要设置 droppable，不然你拖得再溜也放不下去。可以用 drop 事件排序逻辑，顺便更新一下 DOM 或发个求。

如果你是想快速做个带拖拽功能的 UI 原型，或者后台排序页面，这招挺好用。需要更多例子可以看看 sortable 插件的拖动示例，灵感也许就来了。