Material Design 实现列表项拖拽排序的方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，实现列表项的拖拽排序是一个常见的需求。在 Material Design 中，拖拽排序也是一个重要的交互方式。本文将介绍如何使用 Material Design 实现列表项的拖拽排序，并提供示例代码。

实现思路

实现列表项的拖拽排序，需要以下几个步骤：

给每个列表项添加可拖拽的属性；
监听列表项的拖拽事件；
实现列表项的位置交换。

添加可拖拽属性

在 Material Design 中，使用 md-list 元素来实现列表。每个列表项使用 md-list-item 元素来表示。为了使列表项可拖拽，需要给每个 md-list-item 元素添加 draggable 属性，并将其值设为 true。

// javascriptcn.com 代码示例
<md-list>
  <md-list-item draggable="true">
    Item 1
  </md-list-item>
  <md-list-item draggable="true">
    Item 2
  </md-list-item>
  <md-list-item draggable="true">
    Item 3
  </md-list-item>
</md-list>

监听拖拽事件

为了监听列表项的拖拽事件，需要使用 dragstart、dragenter、dragover、dragleave 和 drop 事件。

dragstart 事件在开始拖拽时触发；
dragenter 事件在拖拽的元素进入目标元素时触发；
dragover 事件在拖拽的元素在目标元素上移动时触发；
dragleave 事件在拖拽的元素离开目标元素时触发；
drop 事件在拖拽的元素在目标元素上释放时触发。

需要注意的是，在 dragover 事件中，需要调用 event.preventDefault() 方法，以允许拖拽元素在目标元素上释放。

// javascriptcn.com 代码示例
var draggingItem = null;

function handleDragStart(event) {
  draggingItem = event.target;
}

function handleDragEnter(event) {
  if (event.target !== draggingItem) {
    event.target.classList.add('drag-over');
  }
}

function handleDragOver(event) {
  event.preventDefault();
}

function handleDragLeave(event) {
  event.target.classList.remove('drag-over');
}

function handleDrop(event) {
  event.target.classList.remove('drag-over');
  event.target.parentNode.insertBefore(draggingItem, event.target.nextSibling);
}

实现位置交换

在 handleDrop 方法中，使用 insertBefore 方法实现列表项位置的交换。具体来说，将被拖拽的元素插入到目标元素的后面。

示例代码

下面是一个完整的示例代码，实现了 Material Design 风格的列表项拖拽排序功能。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Material Design List Drag and Drop</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.12/angular-material.min.css">
    <style>
      .drag-over {
        background-color: #eee;
      }
    </style>
  </head>
  <body ng-app="app" ng-controller="ctrl">
    <md-content>
      <md-list>
        <md-list-item draggable="true" ng-repeat="item in items" ng-model="items">
          {{item}}
        </md-list-item>
      </md-list>
    </md-content>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-animate/1.6.10/angular-animate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-aria/1.6.9/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.12/angular-material.min.js"></script>
    <script>
      angular.module('app', ['ngMaterial'])
      .controller('ctrl', function($scope) {
        $scope.items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'];
      })
      .run(function() {
        var draggingItem = null;

        function handleDragStart(event) {
          draggingItem = event.target;
        }

        function handleDragEnter(event) {
          if (event.target !== draggingItem) {
            event.target.classList.add('drag-over');
          }
        }

        function handleDragOver(event) {
          event.preventDefault();
        }

        function handleDragLeave(event) {
          event.target.classList.remove('drag-over');
        }

        function handleDrop(event) {
          event.target.classList.remove('drag-over');
          event.target.parentNode.insertBefore(draggingItem, event.target.nextSibling);
        }

        var items = document.querySelectorAll('[draggable=true]');
        for (var i = 0; i < items.length; i++) {
          items[i].addEventListener('dragstart', handleDragStart, false);
          items[i].addEventListener('dragenter', handleDragEnter, false);
          items[i].addEventListener('dragover', handleDragOver, false);
          items[i].addEventListener('dragleave', handleDragLeave, false);
          items[i].addEventListener('drop', handleDrop, false);
        }
      });
    </script>
  </body>
</html>

总结

本文介绍了如何使用 Material Design 实现列表项的拖拽排序，包括添加可拖拽属性、监听拖拽事件和实现位置交换。通过本文的介绍，读者可以了解到 Material Design 在交互设计方面的一些思路和实现方式，同时也可以借鉴本文提供的示例代码，为自己的项目添加拖拽排序功能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65646568d2f5e1655ddd7db0