前端10大开源拖拽排序库汇总，让搭建，更简单

hi, 大家好, 我是徐小夕,之前和大家分享了很多「低代码可视化」和「前端工程化」相关的话题, 今天继续和大家分享「8」个非常流行的开源「拖拽排序」库以及「2」个非常有价值的「可视化搭建」解决方案.
❞

1. dragula

一款强大且兼容性极好地拖拽排序库, 兼容「IE7+」, 并且支持 「vanilla JavaScript / Angular / React」等框架.

「github:」 https://github.com/bevacqua/dragula

「demo地址:」 https://bevacqua.github.io/dragula/

2. Interact.js

「interact.js」 是一个 「JavaScript」 资源库提供拖，放，调整尺寸和多点触摸手势功能用于现代浏览器。它的免费和开源版本提供了强大的配置像惯性和指针、约束调整器。

「interact.js Pro」 使用更多的调节器扩展了该开源功能，更多复杂的内置交互，框架集成，和高级开发工具，用于节省我们的事件和js开销。

「github:」 https://github.com/taye/interact.js

「demo地址:」 https://interactjs.io/

3. react-dnd

「React DnD」 是一组 「React」 高阶组件，使用的时候只需要使用对应的 「API」 将目标组件进行包裹，即可实现拖动或接受拖动元素的功能。

「github:」 https://github.com/react-dnd/react-dnd

「demo地址:」 http://react-dnd.github.io/react-dnd

4. Sortable

「Sortable」 —是一个「JavaScript」库，用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需「jQuery」。支持Meteor，AngularJS，React，Polymer，Vue，Ember，Knockout和任何CSS库，例如Bootstrap.

「github:」 https://github.com/SortableJS/Sortable

「demo地址:」 https://sortablejs.github.io/Sortable/

5. scriptaculous

「scriptaculous」是一组「JavaScript」库，用于增强网站的用户界面。它提供了一个视觉效果引擎，一个拖放库（包括可排序列表），几个控件（基于「Ajax」的动态下拉列表，原地编辑，滑块）等等。

「github:」 https://github.com/madrobby/scriptaculous

6. react-beautiful-dnd

漂亮,可移植性列表拖拽库. 有很多库允许React中的拖放交互. 其中最值得注意的是惊人的「react-dnd」. 它提供了一套非常出色的拖放函数,这些函数在特定情况下非常适用疯狂地不一致的html5拖放功能. 「react-beautiful-dnd」 是为垂直和水平列表专门构建得更高级别的抽象. 在该功能的子集内「react-beautiful-dnd」提供强大,自然和美丽的拖放体验.

「github:」 https://github.com/atlassian/react-beautiful-dnd

「demo地址:」 https://react-beautiful-dnd.netlify.app/

7. react-grid-dnd

网格式的拖拽排序库, 支持优雅的动画拖拽效果.

「github:」 https://github.com/bmcmahen/react-grid-dnd

「demo地址:」 https://codesandbox.io/embed/gracious-wozniak-kj9w8

8. dnd kit

「dndkit」 可以让我们轻松构建拖放界面, 而无需在每次项目需要移动位置时都更新「dom」.

「github:」 https://github.com/clauderic/dnd-kit

「demo地址:」 https://dndkit.com/

可视化搭建解决方案

1. H5-dooring

H5-Dooring 是一款功能强大，高可扩展的 H5 可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的 H5 落地页最佳实践。

「github:」 https://github.com/MrXujiang/h5-Dooring

「官网地址:」 http://h5.dooring.cn

2. Formily

在 React 中，在受控模式下，表单的整树渲染问题非常明显。特别是对于数据联动的场景，很容易导致页面卡顿，为了解决这个问题，「Formily」将每个表单字段的状态做了分布式管理，从而大大提升了表单操作性能。同时，「Formily」深度整合了 「JSON Schema」 协议，可以帮助您快速解决后端驱动表单渲染的问题。

「github:」 https://github.com/alibaba/formily

「官网地址:」 https://formilyjs.org/

3. V6.Dooring

一款开箱即用的可视化大屏解决方案. 支持接入任何后端语言, 支持扩展 + 二次开发.

「官网地址:」 http://h5.dooring.cn/docz/source-list/V6.Dooring/v6

好啦, 今天的分享就到这啦, 如果文章对你有帮助, 欢迎「点赞」 + 「评论」, 鼓励作者创造更优质的内容~

介

Vue.Draggable是一款基于Sortable.js专门为了适配Vue而开发的一款组件库，可用动拖动排序等一系列功能。如果对于有这方面需求的小伙伴，绝对是一款不可错过的组件库~~~

值得一提的是这个库目前也已经对Vue3做了适配。算是比较良心了，为作者点赞，先看一张来自官网的gif图吧

项目地址

//vue2
https://github.com/SortableJS/Vue.Draggable
//vue3
https://github.com/SortableJS/vue.draggable.next
// live demo
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/

主要功能

全面支持sortable.js的功能
支持触摸设备
支持拖动和可选文本
智能自动滚动
支持不同列表之间的拖放
无 jquery 依赖性
保持同步HTML和数据列表更新
兼容 Vue.js 2.0 transition-group

使用

安装

//yarn方式
yarn add vuedraggable
//npm方式
npm i -S vuedraggable

对于Vue2看一个完整的例子

<template>
  <div class="fluid container">
    <div class="form-group form-group-lg panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Sortable control</h3>
      </div>
      <div class="panel-body">
        <div class="checkbox">
          <label><input type="checkbox" v-model="editable">Enable drag and drop</label>
        </div>
        <button type="button" class="btn btn-default" @click="orderList">Sort by original order</button>
      </div>
    </div>

    <div class="col-md-3">
      <draggable class="list-group" tag="ul" v-model="list" v-bind="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false">
        <transition-group type="transition" :name="'flip-list'">
          <li class="list-group-item" v-for="element in list" :key="element.order">
            <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
            {{element.name}}
            <span class="badge">{{element.order}}</span>
          </li>
        </transition-group>
      </draggable>
    </div>

    <div class="col-md-3">
      <draggable element="span" v-model="list2" v-bind="dragOptions" :move="onMove">
        <transition-group name="no" class="list-group" tag="ul">
          <li class="list-group-item" v-for="element in list2" :key="element.order">
            <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
            {{element.name}}
            <span class="badge">{{element.order}}</span>
          </li>
        </transition-group>
      </draggable>
    </div>

    <div class="list-group col-md-3">
      <pre>{{listString}}</pre>
    </div>
    <div class="list-group col-md-3">
      <pre>{{list2String}}</pre>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
const message = [
  "vue.draggable",
  "draggable",
  "component",
  "for",
  "vue.js 2.0",
  "based",
  "on",
  "Sortablejs"
];
export default {
  name: "hello",
  components: {
    draggable
  },
  data() {
    return {
      list: message.map((name, index) => {
        return { name, order: index + 1, fixed: false };
      }),
      list2: [],
      editable: true,
      isDragging: false,
      delayedDragging: false
    };
  },
  methods: {
    orderList() {
      this.list = this.list.sort((one, two) => {
        return one.order - two.order;
      });
    },
    onMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      );
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: !this.editable,
        ghostClass: "ghost"
      };
    },
    listString() {
      return JSON.stringify(this.list, null, 2);
    },
    list2String() {
      return JSON.stringify(this.list2, null, 2);
    }
  },
  watch: {
    isDragging(newValue) {
      if (newValue) {
        this.delayedDragging = true;
        return;
      }
      this.$nextTick(() => {
        this.delayedDragging = false;
      });
    }
  }
};
</script>

<style>
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group {
  min-height: 20px;
}
.list-group-item {
  cursor: move;
}
.list-group-item i {
  cursor: pointer;
}
</style>

总结

对于Vue3的用法和Vue2用法也基本一致，需要注意的地方官网也都给出了说明，大家有什么不明白的地方，可以去查看一下官网，上面讲解的很清楚~好啦，就给大家分享到这里吧

最后祝大家生活愉快，工作顺利~[呲牙][呲牙]

vvebJs是一个开源的网页拖拽自动生成的JavaScript库，你可以以简单拖拽的方式生成自己需要的网页样式，内置jquery和Bootstrap，你可以拖拽相关的组件进行网页的构建，非常的方便，而且可以实时修改代码，功能丰富，使用简单，界面友好，特别适合一些专注于展示的网页设计，需要的朋友不可错过！

在线演示：http://www.vvveb.com/vvvebjs/editor.html

相关特性

1、组件和块/片段拖放;

2、撤销/重做操作;

3、一个或两个面板界面;

4、文件管理器和组件层次结构导航添加新页面;

5、实时代码编辑器;

6、包含示例php脚本的图像上传;

7、页面下载或导出html或保存页面在服务器上包含示例PHP脚本;

8、组件/块列表搜索;

9、Bootstrap 4组件等组件。

默认情况下，编辑器附带Bootstrap 4和Widgets组件，可以使用任何类型的组件和输入进行扩展。

使用方式

要初始化编辑器，调用Vvveb.Builder.init。第一个参数是要加载以进行编辑的URL，它必须位于相同的子域中才能进行编辑。第二个参数是页面加载完成时调用的函数，默认情况下调用编辑器Gui.init();

结构

Component Group是一个组件集合，例如Bootstrap 4组由Button和Grid等组件组成，该对象仅用于在编辑器左侧面板中对组件进行分组。例如，Widgets组件组只有两个组件视频和地图，并被定义为如下

Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];

Component是一个对象，它提供可以在画布上放置的html以及在选择组件时可以编辑的属性，例如Video Component，具有Url和Target属性的html链接Component定义为：

Vvveb.Components.extend("_base", "html/link", {
nodes: ["a"],
name: "Link",
properties: [{
name: "Url",
key: "href",
htmlAttr: "href",
inputtype: LinkInput
}, {
name: "Target",
key: "target",
htmlAttr: "target",
inputtype: TextInput
}]
});

在Component属性集合中使用Input对象来编辑属性，例如文本输入，选择，颜色，网格行等。例如，TextInput扩展Input对象并定义为：

var TextInput = $.extend({}, Input, {
events: {
"keyup": ['onChange', 'input'],
},
setValue: function(value) {
$('input', this.element).val(value);
},
init: function(data) {
return this.render("textinput", data);
},
}
);

输入还需要一个在编辑器html（在editor.html中）定义为以上是借助浏览器翻译工具，对官网的文档进行简单的翻译，可能会有些不够准确的地方，感兴趣的小伙伴可以直接查看相关文档！

设计界面预览

总结

VvvebJs是一个非常强大的网页可视化生成构建工具，让不懂网页设计的小伙伴们也能够通过拖拽来生成美观大方的网页出来，让设计网页就像设计图片一样，VvvebJs特别适合展示型网页，甚至可以不需要代码就能完成一项复杂的网页设计，总体来说，VvvebJs是一个值得尝试的工具！

原文来自：https://www.linuxprobe.com/?p=155868

在线咨询

上一篇：如何用HTML5建企业网站？（附教程）
下一篇：白鹭引擎马鉴、张翔：Html5相当于手机端的FLASH

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商