vue-devui/dragdrop/index.es.js

DevUI components based on Vite and Vue3

var draggableDirective = {};
var droppableDirective = {};
function matches(element, selector) {
  const proto = Element.prototype;
  const func = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector || proto.webkitMatchesSelector || function(s) {
    const ctx = this;
    const matchesElements = (ctx.document || ctx.ownerDocument).querySelectorAll(s);
    let i = matchesElements.length;
    while (--i >= 0 && matchesElements.item(i) !== ctx) {
    }
    return i > -1;
  };
  return func.call(element, selector);
}
var SortableDirective = {
  mounted(el, binding) {
    let sourceElement;
    let sourceIndex;
    let targetIndex;
    let mouseoverElement;
    let isDrop;
    const canDrag = () => {
      var _a, _b;
      if ((_a = binding == null ? void 0 : binding.value) == null ? void 0 : _a.handle) {
        const handleSelector = (_b = binding == null ? void 0 : binding.value) == null ? void 0 : _b.handle;
        let element = mouseoverElement;
        while (element !== el) {
          if (matches(element, handleSelector)) {
            return true;
          }
          element = element.parentNode;
        }
        return false;
      }
      return true;
    };
    const getCurrentTarget = (event) => {
      let index2 = -1;
      let element = event.target;
      while (element !== el) {
        if (element.parentNode === el) {
          index2 = Array.from(el.children).indexOf(element);
        }
        element = element.parentNode;
      }
      return index2;
    };
    const getDragClass = () => {
      var _a;
      return ((_a = binding == null ? void 0 : binding.value) == null ? void 0 : _a.dragClass) || "devui-drag-item";
    };
    const emitEvent = (funcName, event) => {
      if (binding == null ? void 0 : binding.value[funcName]) {
        binding == null ? void 0 : binding.value[funcName](event);
      }
    };
    el.addEventListener("mouseover", (event) => {
      mouseoverElement = event.target;
    });
    Array.from(el.children).forEach((element) => {
      element.setAttribute("draggable", "true");
      element.addEventListener("dragstart", (event) => {
        if (canDrag()) {
          isDrop = false;
          sourceElement = element;
          sourceIndex = Array.from(el.children).indexOf(sourceElement);
          setTimeout(() => {
            sourceElement.classList.add(getDragClass());
          });
        } else {
          event.preventDefault();
          event.stopPropagation();
        }
        emitEvent("dragStart", event);
      });
    });
    el.addEventListener("dragenter", function(event) {
      emitEvent("dragEnter", event);
    });
    el.addEventListener("dragover", function(event) {
      var _a, _b;
      const currentIndex = Array.from(el.children).indexOf(sourceElement);
      const toIndex = getCurrentTarget(event);
      if (currentIndex !== -1 && toIndex !== -1) {
        if (currentIndex > toIndex) {
          el.removeChild(sourceElement);
          el.insertBefore(sourceElement, el.children[toIndex]);
          targetIndex = toIndex;
        } else if (currentIndex < toIndex) {
          el.removeChild(sourceElement);
          if (el.children[toIndex]) {
            el.insertBefore(sourceElement, el.children[toIndex]);
            targetIndex = toIndex;
          } else {
            el.appendChild(sourceElement);
            targetIndex = el.children.length - 1;
          }
        }
        ((_a = binding == null ? void 0 : binding.value) == null ? void 0 : _a.dragover) && ((_b = binding == null ? void 0 : binding.value) == null ? void 0 : _b.dragover(event));
      }
      event.preventDefault();
      emitEvent("dragOver", event);
    });
    el.addEventListener("dragleave", function(event) {
      emitEvent("dragLeave", event);
    });
    el.addEventListener("drop", function(event) {
      var _a, _b, _c;
      isDrop = true;
      if ((_a = binding == null ? void 0 : binding.value) == null ? void 0 : _a.list) {
        const list = (_b = binding == null ? void 0 : binding.value) == null ? void 0 : _b.list;
        const item = list[sourceIndex];
        list.splice(sourceIndex, 1);
        list.splice(targetIndex, 0, item);
        if ((_c = binding == null ? void 0 : binding.value) == null ? void 0 : _c.drop) {
          emitEvent("drop", {
            event,
            list,
            fromIndex: sourceIndex,
            targetIndex
          });
        }
      }
    });
    el.addEventListener("dragend", function(event) {
      if (!isDrop) {
        if (sourceIndex !== -1 && targetIndex !== -1) {
          if (targetIndex > sourceIndex) {
            el.removeChild(sourceElement);
            el.insertBefore(sourceElement, el.children[sourceIndex]);
          } else if (sourceIndex > targetIndex) {
            el.removeChild(sourceElement);
            if (el.children[sourceIndex]) {
              el.insertBefore(sourceElement, el.children[sourceIndex]);
            } else {
              el.appendChild(sourceElement);
            }
          }
        }
      }
      sourceIndex = -1;
      targetIndex = -1;
      setTimeout(() => {
        sourceElement.classList.remove(getDragClass());
      });
      emitEvent("dragEnd", event);
    });
  }
};
var index = {
  title: "Dragdrop \u62D6\u62FD",
  category: "\u6F14\u8FDB\u4E2D",
  status: "100%",
  install(app) {
    app.directive("DSortable", SortableDirective);
  }
};
export { draggableDirective as DraggableDirective, droppableDirective as DroppableDirective, SortableDirective, index as default };