使用 Custom Elements 实现拖拽排序组件及解决移动端兼容性问题

在前端的开发中，拖拽排序是一项非常常见的需求。本文将介绍如何利用 Custom Elements 实现一个拖拽排序组件，并解决在移动端的兼容性问题。

Custom Elements 简介

Custom Elements 是 Web Components 的一部分，它允许开发者定义自己的 HTML 标签以及其行为。通过自定义 HTML 标签，我们可以实现更为灵活和可复用的组件，同时也有助于提高代码的可维护性和可读性。

实现拖拽排序组件

首先，我们需要定义一个自定义 HTML 标签，并为其添加如下属性。

--------------
  ---- --- ---
---------------
  • draggable：是否可拖拽。
  • ondragstart：拖拽开始时触发的事件。
  • ondragover：拖拽目标元素上方时触发的事件。
  • ondragend：拖拽结束时触发的事件。
----- ----------- ------- ----------- -
  ------------- -
    --------

    ---------------------------------- ----------------------
    --------------------------------- ---------------------
    -------------------------------- --------------------
  -

  ------------------ -
    -- ---------
    ------------------------------------ -------------
  -

  ---------------- -
    -- --------
    -- -------------------------- --- ------- -
      -- ----
      -- ---
    - ---- -
      -- ----
      -- ---
    -
  -

  ----------------- -
    -- ------
    -------------------

    -- ---------
    ------------------------- - -------
  -
-

接下来，我们需要为每一个子元素设置可拖拽的属性，并在拖拽结束后根据拖拽的位置进行排序。

----- ----------- ------- ----------- -
  -- ---

  ------------------- -
    ----- -------- - -------------------
    ------------------------ ------ -- -
      ------------------------------- ------
      -------------------------------- -------
    ---
  -

  ---------------- -
    -- --------
    -- -------------------------- --- ------- -
      -- ----
      ----- -------- - -------------------
      ----- ----------- - ------------------------------------
      ----- ----------- - -------------------------------

      -- ------------ --- ------------ -
        ----- ----------- - ----------------------
        ----- ----------- - ----------------------

        -- ------------ - ------------ -
          ------------------------------ -------------
        - ---- -
          ------------------------------ -------------------------
        -
      -
    - ---- -
      -- ----
      -- ---
    -
  -

  ----------------- -
    ----- -------- - -------------------
    ------ ------------------------ -- -
      ----- - ---- ------ - - ------------------------------
      ------ - - --- - ------ - --
    ---
  -
-

解决移动端兼容性问题

在移动端的浏览器中，拖拽排序功能可能会遇到一些问题。因为移动端通常是通过手指滑动来进行操作，而不是通过鼠标拖拽。因此，我们需要对代码进行一些修改，以适应移动端的操作方式。

首先，我们需要监听触摸相关事件，而不是鼠标事件。

----- ----------- ------- ----------- -
  ------------- -
    --------

    ----------------------------------- -----------------------
    ---------------------------------- ----------------------
    --------------------------------- ---------------------
  -

  ------------------- -
    ----- - ------------- - - --
    -- --------------------- --- -- -
      ----- - ------ ----- - - -----------------
      ----------- - ------
      ----------- - ------
      --------------- - ------
    -
  -

  ------------------ -
    ----- - ------------- - - --
    -- --------------------- --- -- -
      ----- - ------ ----- - - -----------------
      ------------- - ------
      ------------- - ------
      --------------- - -----

      -- -----
      -- ---
    -
  -

  ----------------- -
    -- ----------------- -
      ----- -------- - -------------------
      ----- ----------- - ------------------------------------
      ----- ----------- - -----------------------------------

      -- ------------ --- ----------- -- ----------- -- -- -
        ----- ----------- - ----------------------
        ----- ----------- - ----------------------

        -- ------------ - ------------ -
          ------------------------------ -------------
        - ---- -
          ------------------------------ -------------------------
        -
      -
    - ---- -
      -- ---
    -

    --------------- - ------
  -

  -- ---
-

其次，我们需要手动处理滚动条的滚动。在鼠标拖拽时，浏览器会自动处理滚动条的滚动。但是在触摸拖拽时，浏览器并不会自动处理滚动条的滚动，因此我们需要手动处理。

----- ----------- ------- ----------- -
  -- ---

  ------------------ -
    -- ---

    -- -----
    ----- - --------- - - -----
    ----- - ------------- ------- ------------ - - ----------------
    ----- - ----- - - -----------------
    ----- ----- - ------ - ------------ - --

    -- ---------- - ----- - -- -
      -------------- - --
    - ---- -- ---------- - ----- - ------------ - ------- -
      -------------- - ------------ - -------
    - ---- -
      -------------- -- ------
    -
  -

  -- ---
-

示例代码

完整的示例代码如下。

----- ----------- ------- ----------- -
  ------------- -
    --------

    ---------------------------------- ----------------------
    --------------------------------- ---------------------
    -------------------------------- --------------------

    ----------------------------------- -----------------------
    ---------------------------------- ----------------------
    --------------------------------- ---------------------
  -

  ------------------- -
    ----- -------- - -------------------
    ------------------------ ------ -- -
      ------------------------------- ------
      -------------------------------- -------
    ---
  -

  ------------------ -
    -- ---------
    ------------------------------------ -------------
  -

  ---------------- -
    -- --------
    -- -------------------------- --- ------- -
      -- ----
      ----- -------- - -------------------
      ----- ----------- - ------------------------------------
      ----- ----------- - -------------------------------

      -- ------------ --- ------------ -
        ----- ----------- - ----------------------
        ----- ----------- - ----------------------

        -- ------------ - ------------ -
          ------------------------------ -------------
        - ---- -
          ------------------------------ -------------------------
        -
      -
    - ---- -
      -- ----
      -- ---
    -
  -

  ----------------- -
    -- ------
    -------------------

    -- ---------
    ------------------------- - -------
  -

  ------------------- -
    ----- - ------------- - - --
    -- --------------------- --- -- -
      ----- - ------ ----- - - -----------------
      ----------- - ------
      ----------- - ------
      --------------- - ------
    -
  -

  ------------------ -
    ----- - ------------- - - --
    -- --------------------- --- -- -
      ----- - ------ ----- - - -----------------
      ------------- - ------
      ------------- - ------
      --------------- - -----

      -- -----
      ----- - --------- - - -----
      ----- - ------------- ------- ------------ - - ----------------
      ----- ----- - ------ - ------------ - --

      -- ---------- - ----- - -- -
        -------------- - --
      - ---- -- ---------- - ----- - ------------ - ------- -
        -------------- - ------------ - -------
      - ---- -
        -------------- -- ------
      -
    -
  -

  ----------------- -
    -- ----------------- -
      ----- -------- - -------------------
      ----- ----------- - ------------------------------------
      ----- ----------- - -----------------------------------

      -- ------------ --- ----------- -- ----------- -- -- -
        ----- ----------- - ----------------------
        ----- ----------- - ----------------------

        -- ------------ - ------------ -
          ------------------------------ -------------
        - ---- -
          ------------------------------ -------------------------
        -
      -
    - ---- -
      -- ---
    -

    --------------- - ------
  -

  ----------------- -
    ----- -------- - -------------------
    ------ ------------------------ -- -
      ----- - ---- ------ - - ------------------------------
      ------ - - --- - ------ - --
    ---
  -
-

------------------------------------- -------------

总结

通过这篇文章，我们学习了如何利用 Custom Elements 实现一个拖拽排序组件，并解决在移动端的兼容性问题。通过自定义 HTML 标签以及相关的事件和属性，我们可以轻松实现一个灵活、可复用的组件，提高代码的可维护性和可读性。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652e151b7d4982a6ebf2592d

阅读全文

猜你喜欢

  • Serverless 平台中的应用全局配置管理

    随着云计算和 Serverless 技术的发展，现代应用的开发方式趋向于更加轻量化和可扩展。而 Serverless平台正是一个能够实现轻量化和可扩展的自动化管理平台。

    1 年前
  • 如何在 Material Design 中实现仿 QQ 空间的下拉刷新效果

    前言 Material Design 是谷歌推出的一种现代化的设计语言，广泛应用于 Android 和 Web 开发中。QQ 空间是一款基于 Material Design 的社交软件，其下拉刷新效果...

    1 年前
  • Webpack+React 实战（三）配置 webpack.config.js

    在前面的两篇文章中，我们介绍了怎样安装和使用 Webpack 和 React，然后利用 Webpack 打包 React 项目。在本文中，我们将进一步深入讲解 webpack.config.js 的配...

    1 年前
  • Web Components 应用实践：优化 Ajax 数据可视化展示

    前言 在今天的互联网环境下，许多网站为了拥有更好的用户体验和更高的流量，都在尝试着将自己的页面变得更加生动和直观，其中数据可视化的需求尤为突出。 而 Ajax 技术作为一种异步数据传输技术，也在不少的...

    1 年前
  • Fastify 框架中间件的实现与使用教程

    Fastify 是一个轻量级的 Web 框架，它的性能非常出色，尤其是在处理请求时能够快速地进行响应，因此它被广泛应用于构建高性能的 Web 应用程序。Fastify 本身内置了很多中间件，但是如果你...

    1 年前
  • Sequelize 操作 PostgreSQL 数据库出现 “ERROR：列名 XXX 不存在” 错误，如何解决？

    引言 在使用 Sequelize 操作 PostgreSQL 数据库时，有时会出现“ERROR：列名 XXX 不存在”的错误。这个错误通常是由于 Sequelize 操作数据库的方式不当或数据库结构变...

    1 年前
  • ES7 入门之 async/await 异步编程

    在前端开发中，异步编程是一种不可避免的需求。ES7中推出的async/await关键词为JavaScript中的异步编程提供了更简单、更直观的解决方案。本篇文章将详细介绍async/await的用法及...

    1 年前
  • 如何使用 LESS 实现各向异性透明度效果

    在前端开发中，为了实现更丰富的样式效果，我们经常需要使用透明度。而随着应用场景的不同，要求的透明度效果也千差万别。其中一个特殊的需求就是各向异性透明度效果（Anisotropic Transparen...

    1 年前
  • 使用 RxJS 进行分页时如何解决初始页面不显示的问题

    在前端开发过程中，分页功能是非常常见的需求。RxJS 是一个强大的 JavaScript 库，它可以帮助我们更方便地处理异步数据流，包括分页数据。然而，在使用 RxJS 进行分页时，有时候会遇到一个问...

    1 年前
  • Vue.js 中使用 Socket.io 进行实时通信

    在现代 web 应用程序中，实时通信功能越来越受欢迎，例如实时聊天、在线游戏等。在前端开发中，使用 Socket.io 可以很容易地实现实时通信功能。本文将介绍如何在 Vue.js 中使用 Socke...

    1 年前
  • Next.js 中如何集成 PWA 以优化移动应用程序

    伴随着移动互联网的发展和用户体验的逐渐提高，PWA（Progressive Web Apps）在前端开发中变得越来越重要。PWA 可以使得 Web 应用具有原生应用的体验，能在离线状态下也能够保证用户...

    1 年前
  • 如何使用 Headless CMS 实现企业级内容管理和协作？

    在当今的数字时代，企业需要更加智能化和高效化的内容管理来降低成本和提高效率。Headless CMS 成为了一种越来越受欢迎的内容管理方案，它允许企业将内容从呈现层解耦出来，让前端开发者可以更加自由地...

    1 年前
  • PM2 作为进程守护工具的优势与不足

    什么是 PM2？ PM2 是一个进程守护工具，用于管理应用程序的生命周期并确保其连续运行。PM2 的主要功能包括进程管理、日志管理、负载均衡、开机启动等。 PM2 的优势 进程管理 PM2 可以轻松地...

    1 年前
  • 如何优化 MongoDB 的读性能？教你精细化优化！

    前言 MongoDB 是目前业内常用的 NoSQL 数据库，常用于存储半结构化数据和文档类型数据。 MongoDB 的读性能直接影响着系统的响应速度和用户体验。而优化 MongoDB 的读性能是前端工...

    1 年前
  • Kubernetes Pod 无法正常运行？看这里！

    Kubernetes Pod 简介 Kubernetes (K8s) 是一个开源的容器编排工具，用于自动化容器的部署、扩展和管理。在 Kubernetes 中，最小的运行单元是 Pod，一个 Pod ...

    1 年前
  • Mongoose 中的自增值解析：如何实现自动增加序号

    摘要：在使用 MongoDB 数据库的时候，有一个非常常见的需求就是需要用到自增 ID。当我们使用 Mongoose 这个 Node.js 的 MongoDB 驱动程序时，可以轻松地实现自动增加序号。

    1 年前
  • 如何排除 Enzyme 测试中的无用错误信息

    Enzyme 是一个流行的 JavaScript 测试库，用于测试 React 组件。但是在编写测试时，有时会出现大量的无用错误信息，这会让调试变得非常困难。这篇文章将介绍如何排除 Enzyme 测试...

    1 年前
  • Cypress 自动化测试中，如何测量响应时间？

    在进行 Cypess 自动化测试时，我们经常需要测试每个页面或组件的响应时间。这对于保证用户体验和性能优化至关重要。本文将介绍如何使用 Cypress 测试框架来测量响应时间。

    1 年前
  • Vue.js 中父子组件之间的相互传值详解

    在 Vue.js 中，组件通信是非常常见的需求。在组件之间传递数据，就需要使用 Vue.js 提供的 props 和 emit 两个 API，其中，父组件通过 props 将数据传给子组件，子组件通过...

    1 年前
  • TypeScript 如何使用 Promise 和 async /await

    概述 Promise 和 async/await 是 JavaScript 中处理异步编程的两种方式。它们可以帮助我们更方便地处理异步代码，避免回调地狱。在 TypeScript 中，我们也可以使用这...

    1 年前

相关推荐

    暂无文章