在 Vue 2 中实现可拖拽排序指令：v-sortable

在Vue 2中实现一个可拖拽排序指令v-draggable可以通过以下步骤来完成：

1. 定义一个指令工厂函数。
2. 在绑定元素上添加事件监听器。
3. 实现拖拽逻辑，包括拖动开始、拖动进行和拖动结束。

以下是一个简化版的示例代码：

Vue.directive('draggable', {
  bind(el, binding, vnode) {
    let dragging = false;
    let x, y;
    let container = vnode.context.$el;
 
    el.onmousedown = function(e) {
      dragging = true;
      x = e.clientX - el.offsetWidth / 2;
      y = e.clientY - el.offsetHeight / 2;
      el.style.position = 'absolute';
      el.style.zIndex = 1000;
      el.style.left = e.clientX - x + 'px';
      el.style.top = e.clientY - y + 'px';
 
      document.onmousemove = function(e) {
        if (dragging) {
          let dx = e.clientX - x;
          let dy = e.clientY - y;
          el.style.left = dx + 'px';
          el.style.top = dy + 'px';
 
          // 排序逻辑
          const dragItems = container.querySelectorAll('.draggable-item');
          let hoverItem = null;
          for (let i = 0; i < dragItems.length; i++) {
            const dragItem = dragItems[i];
            if (dragItem === el) continue;
            const rect = dragItem.getBoundingClientRect();
            if (e.clientX > rect.left && e.clientX < rect.right &&
                e.clientY > rect.top && e.clientY < rect.bottom) {
              hoverItem = dragItem;
              break;
            }
          }
          if (hoverItem) {
            container.insertBefore(el, hoverItem);
          }
        }
      };
 
      document.onmouseup = function() {
        dragging = false;
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }
});

在上述代码中，我们定义了一个名为draggable的指令，它会给绑定的元素添加拖拽功能。在拖动开始时，我们记录下鼠标位置和元素位置，并开始监听鼠标移动和结束拖动的事件。在鼠标移动时，我们更新元素的位置，并在需要时调整DOM结构以实现排序。拖动结束后，我们移除鼠标事件监听。

使用这个指令时，只需将它添加到你希望能够拖动的元素上：

<div v-draggable class="draggable-item">可拖动的元素</div>

请注意，这个示例没有考虑性能优化（例如，避免在每次鼠标移动时都进行DOM查询）或者边界条件检查（比如边界检查以防元素被拖出容器等）。实际应用中需要进一步优化以确保性能和稳定性。