真是拖累...

为什么要让元素可拖动？
可拖动元素可以显着提高各种应用程序的可用性，例如：

1. 仪表板：用户可以重新排列小部件以满足他们的喜好。
2. 图片库：用户可以重新定位图像以获得更好的布局。
3. 任务板：用户可以在不同列之间拖放任务。

实现可拖动元素

让我们深入研究代码！下面是一个使 HTML 元素可拖动的 JavaScript 函数。此功能允许您指定启动拖动操作的句柄元素，从而提供更受控的用户体验。

`function makeElementDraggable(selector: string, handleSelector?: string): void {
const DraggableElements: HTMLElement[] = 选择器.startsWith("#")
？ [document.getElementById(selector.slice(1)) as HTMLElement]
: Array.from(document.getElementsByClassName(selector.slice(1)) as HTMLCollectionOf);

draggableElements.forEach((draggable) => {
  if (!draggable) return;

  const handleElement = handleSelector ? draggable.querySelector(handleSelector) as HTMLElement : draggable;
  if (!handleElement) return;

  let isMouseDown = false;
  let initX = 0, initY = 0, offsetX = 0, offsetY = 0;

  function mouseDown(e: MouseEvent): void {
    isMouseDown = true;
    handleElement.style.cursor = "default";
    offsetX = draggable.offsetLeft;
    offsetY = draggable.offsetTop;
    initX = e.clientX - offsetX;
    initY = e.clientY - offsetY;
    document.addEventListener("mousemove", mouseMove);
    document.addEventListener("mouseup", mouseUp);
  }

  function mouseMove(e: MouseEvent): void {
    if (!isMouseDown) return;
    const x = e.clientX - initX;
    const y = e.clientY - initY;
    draggable.style.setProperty("left", `${x}px`, "important");
    draggable.style.setProperty("top", `${y}px`, "important");
    draggable.style.position = "fixed"; 
  }

  function mouseUp(): void {
    isMouseDown = false;
    handleElement.style.cursor = "move";
    document.removeEventListener("mousemove", mouseMove);
    document.removeEventListener("mouseup", mouseUp);
  }

  handleElement.style.cursor = "move";
  handleElement.addEventListener("mousedown", mouseDown);
});

}`

如何运作

1. 选择元素：该函数接受 CSS 选择器来标识要使其可拖动的元素。您可以指定 ID（使用 #）或类（使用 .）。可选的第二个参数允许您定义将启动拖动的手柄元素。

2. 鼠标事件：

• mousedown：当用户在手柄上按下鼠标按钮时，我们开始跟踪移动。
• mousemove：当用户按住按钮的同时移动鼠标时，我们会根据当前鼠标位置更新可拖动元素的位置。
• mouseup：当用户释放鼠标按钮时，我们停止跟踪移动。

1. 定位：可拖动元素的位置是使用 CSS 属性（左侧和顶部）设置的。位置设置为固定，允许将其放置在视口上的任何位置。

直接使用它：-
makeElementDraggable('#myDraggableElement', '.handle');

在此示例中，#myDraggableElement 将使用 .handle 作为拖动手柄来进行拖动。
结论
在 Web 应用程序中实现可拖动元素可以极大地增强交互性和用户满意度。提供的代码片段提供了一种以最少的设置实现此目的的简单方法。在您的项目中尝试一下，看看它如何改进您的用户界面！

你也可以在 React 中做同样的事情，创建一些自定义钩子，比如 useDraggable ，它会做同样的事情。
谢谢，再见

以上是真是拖累...的详细内容。更多信息请关注PHP中文网其他相关文章！