【Sortable】前端拖拽库 | 简洁 | 实用 | 强大

前言

  • 官网 - http://www.sortablejs.com/index.html
  • 中文文档 - https://www.itxst.com/sortablejs/neuinffi.html
  • npm - https://www.npmjs.com/package/sortablejs

npm下载

npm i sortablejs

umd

  <script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>

例子

    const el = document.querySelector('.template-group')//拖拽的父元素
    new Sortable(el, {
        group: { name: "z", pull: true, put: true },
        filter: '.viz-group',// 过滤
        draggable: ".viz-item",//拖拽的元素
        animation: 300,//动画时间
        handle: ".viz-move",//拖拽句柄  - 就是要拖拽的子元素
        easing: 'cubic-bezier(0.16, 1, 0.3, 1)',//动效 
        ghostClass: 'drop-select',//拖拽class
    }) 

拖拽句柄解释

如下图

  • 假如设置了拖拽句柄,要拖拽红框的元素,黄框就是拖拽句柄。
  • 只有当拖拽句柄才能拖拽红框元素

【Sortable】前端拖拽库 | 简洁 | 实用 | 强大_第1张图片

Demo

demo.html

<style>
    .box {
      width: 200px;
      max-width: 220px;
    }

    .item,
    .title {
      display: flex;
      justify-content: space-between;
      height: 30px;
      align-items: center;
      border: solid 1px #ccc;
      border-style: none none solid solid;
    }

    .title {
      background-color: #f4f4f4;
    }

    .move {
      background-color: rgb(116, 199, 202);
      width: 30px;
      height: 100%;
      cursor: grab;
    }

    .move:hover {
      background-color: cadetblue;
    }

    /* 拖拽样式 */
    .drop-select {
      background: rgba(18, 188, 255, 0.25);
    }
  style>
  <body>
    <div class="box">
      
      <div class="item">
        <div class="item-grid">文本1div>
        
        <div class="move">div>
      div>
      <div class="item">
        <div class="item-grid">文本2div>
        <div class="move">div>
      div>
      <div class="item">
        <div class="item-grid">文本3div>
        <div class="move">div>
      div>
      <div class="item">
        <div class="item-grid">文本4div>
        <div class="move">div>
      div>
      <div class="item">
        <div class="item-grid">文本5div>
        <div class="move">div>
      div>
      <div class="item">
        <div class="item-grid">文本6div>
        <div class="move">div>
      div>
      <div class="title">更多div>
      <div class="item">
        <div class="item-grid">6666div>
        <div class="move">div>
      div>
      <div class="item">
        <div class="item-grid">7777div>
        <div class="move">div>
      div>
      <div class="item">
        <div class="item-grid">520div>
        <div class="move">div>
      div>
    div>
    <script src="https://www.itxst.com/package/sortable/sortable.min.js">script>
    <script>
      const el = document.querySelector(".box");
      new Sortable(el, {
        group: { name: "group1", pull: true, put: true },
        filter: ".title", // 过滤
        draggable: ".item", //拖拽的元素
        animation: 300, //动画时间
        handle: ".move", //拖拽句柄  - 就是要拖拽的子元素
        easing: "cubic-bezier(0.16, 1, 0.3, 1)", //动效
        ghostClass: "drop-select", //拖拽class
      });
    script>
  body>

效果

拖拽前

【Sortable】前端拖拽库 | 简洁 | 实用 | 强大_第2张图片

拖拽中

【Sortable】前端拖拽库 | 简洁 | 实用 | 强大_第3张图片

拖拽后

【Sortable】前端拖拽库 | 简洁 | 实用 | 强大_第4张图片

你可能感兴趣的:(JS,前端,javascript)