前端10大開源拖拽排序庫(kù)匯總，讓搭建，更簡(jiǎn)單

hi, 大家好, 我是徐小夕,之前和大家分享了很多「低代碼可視化」和「前端工程化」相關(guān)的話題, 今天繼續(xù)和大家分享「8」個(gè)非常流行的開源「拖拽排序」庫(kù)以及「2」個(gè)非常有價(jià)值的「可視化搭建」解決方案.
?

1. dragula

一款強(qiáng)大且兼容性極好地拖拽排序庫(kù), 兼容「IE7+」, 并且支持 「vanilla JavaScript / Angular / React」等框架.

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

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

2. Interact.js

「interact.js」 是一個(gè) 「JavaScript」 資源庫(kù)提供拖，放，調(diào)整尺寸和多點(diǎn)觸摸手勢(shì)功能用于現(xiàn)代瀏覽器。它的免費(fèi)和開源版本提供了強(qiáng)大的配置像慣性和指針、約束調(diào)整器。

「interact.js Pro」 使用更多的調(diào)節(jié)器擴(kuò)展了該開源功能，更多復(fù)雜的內(nèi)置交互，框架集成，和高級(jí)開發(fā)工具，用于節(jié)省我們的事件和js開銷。

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

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

3. react-dnd

「React DnD」 是一組 「React」 高階組件，使用的時(shí)候只需要使用對(duì)應(yīng)的 「API」 將目標(biāo)組件進(jìn)行包裹，即可實(shí)現(xiàn)拖動(dòng)或接受拖動(dòng)元素的功能。

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

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

4. Sortable

「Sortable」 —是一個(gè)「JavaScript」庫(kù)，用于在現(xiàn)代瀏覽器和觸摸設(shè)備上對(duì)拖放列表進(jìn)行重新排序。無(wú)需「jQuery」。支持Meteor，AngularJS，React，Polymer，Vue，Ember，Knockout和任何CSS庫(kù)，例如Bootstrap.

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

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

5. scriptaculous

「scriptaculous」是一組「JavaScript」庫(kù)，用于增強(qiáng)網(wǎng)站的用戶界面。它提供了一個(gè)視覺(jué)效果引擎，一個(gè)拖放庫(kù)（包括可排序列表），幾個(gè)控件（基于「Ajax」的動(dòng)態(tài)下拉列表，原地編輯，滑塊）等等。

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

6. react-beautiful-dnd

漂亮,可移植性列表拖拽庫(kù). 有很多庫(kù)允許React中的拖放交互. 其中最值得注意的是驚人的「react-dnd」. 它提供了一套非常出色的拖放函數(shù),這些函數(shù)在特定情況下非常適用瘋狂地不一致的html5拖放功能. 「react-beautiful-dnd」 是為垂直和水平列表專門構(gòu)建得更高級(jí)別的抽象. 在該功能的子集內(nèi)「react-beautiful-dnd」提供強(qiáng)大,自然和美麗的拖放體驗(yàn).

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

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

7. react-grid-dnd

網(wǎng)格式的拖拽排序庫(kù), 支持優(yōu)雅的動(dòng)畫拖拽效果.

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

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

8. dnd kit

「dndkit」 可以讓我們輕松構(gòu)建拖放界面, 而無(wú)需在每次項(xiàng)目需要移動(dòng)位置時(shí)都更新「dom」.

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

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

可視化搭建解決方案

1. H5-dooring

H5-Dooring 是一款功能強(qiáng)大，高可擴(kuò)展的 H5 可視化頁(yè)面配置解決方案，致力于提供一套簡(jiǎn)單方便、專業(yè)可靠、無(wú)限可能的 H5 落地頁(yè)最佳實(shí)踐。

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

「官網(wǎng)地址:」 http://h5.dooring.cn

2. Formily

在 React 中，在受控模式下，表單的整樹渲染問(wèn)題非常明顯。特別是對(duì)于數(shù)據(jù)聯(lián)動(dòng)的場(chǎng)景，很容易導(dǎo)致頁(yè)面卡頓，為了解決這個(gè)問(wèn)題，「Formily」將每個(gè)表單字段的狀態(tài)做了分布式管理，從而大大提升了表單操作性能。同時(shí)，「Formily」深度整合了 「JSON Schema」 協(xié)議，可以幫助您快速解決后端驅(qū)動(dòng)表單渲染的問(wèn)題。

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

「官網(wǎng)地址:」 https://formilyjs.org/

3. V6.Dooring

一款開箱即用的可視化大屏解決方案. 支持接入任何后端語(yǔ)言, 支持?jǐn)U展 + 二次開發(fā).

「官網(wǎng)地址:」 http://h5.dooring.cn/docz/source-list/V6.Dooring/v6

好啦, 今天的分享就到這啦, 如果文章對(duì)你有幫助, 歡迎「點(diǎn)贊」 + 「評(píng)論」, 鼓勵(lì)作者創(chuàng)造更優(yōu)質(zhì)的內(nèi)容~

介

Vue.Draggable是一款基于Sortable.js專門為了適配Vue而開發(fā)的一款組件庫(kù)，可用動(dòng)拖動(dòng)排序等一系列功能。如果對(duì)于有這方面需求的小伙伴，絕對(duì)是一款不可錯(cuò)過(guò)的組件庫(kù)~~~

值得一提的是這個(gè)庫(kù)目前也已經(jīng)對(duì)Vue3做了適配。算是比較良心了，為作者點(diǎn)贊，先看一張來(lái)自官網(wǎng)的gif圖吧

項(xiàng)目地址

//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的功能
支持觸摸設(shè)備
支持拖動(dòng)和可選文本
智能自動(dòng)滾動(dòng)
支持不同列表之間的拖放
無(wú) jquery 依賴性
保持同步HTML和數(shù)據(jù)列表更新
兼容 Vue.js 2.0 transition-group

使用

安裝

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

對(duì)于Vue2看一個(gè)完整的例子

<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>

總結(jié)

對(duì)于Vue3的用法和Vue2用法也基本一致，需要注意的地方官網(wǎng)也都給出了說(shuō)明，大家有什么不明白的地方，可以去查看一下官網(wǎng)，上面講解的很清楚~好啦，就給大家分享到這里吧

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

vvebJs是一個(gè)開源的網(wǎng)頁(yè)拖拽自動(dòng)生成的JavaScript庫(kù)，你可以以簡(jiǎn)單拖拽的方式生成自己需要的網(wǎng)頁(yè)樣式，內(nèi)置jquery和Bootstrap，你可以拖拽相關(guān)的組件進(jìn)行網(wǎng)頁(yè)的構(gòu)建，非常的方便，而且可以實(shí)時(shí)修改代碼，功能豐富，使用簡(jiǎn)單，界面友好，特別適合一些專注于展示的網(wǎng)頁(yè)設(shè)計(jì)，需要的朋友不可錯(cuò)過(guò)！

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

相關(guān)特性

1、組件和塊/片段拖放;

2、撤銷/重做操作;

3、一個(gè)或兩個(gè)面板界面;

4、文件管理器和組件層次結(jié)構(gòu)導(dǎo)航添加新頁(yè)面;

5、實(shí)時(shí)代碼編輯器;

6、包含示例php腳本的圖像上傳;

7、頁(yè)面下載或?qū)С鰄tml或保存頁(yè)面在服務(wù)器上包含示例PHP腳本;

8、組件/塊列表搜索;

9、Bootstrap 4組件等組件。

默認(rèn)情況下，編輯器附帶Bootstrap 4和Widgets組件，可以使用任何類型的組件和輸入進(jìn)行擴(kuò)展。

使用方式

要初始化編輯器，調(diào)用Vvveb.Builder.init。第一個(gè)參數(shù)是要加載以進(jìn)行編輯的URL，它必須位于相同的子域中才能進(jìn)行編輯。第二個(gè)參數(shù)是頁(yè)面加載完成時(shí)調(diào)用的函數(shù)，默認(rèn)情況下調(diào)用編輯器Gui.init();

結(jié)構(gòu)

Component Group是一個(gè)組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對(duì)象僅用于在編輯器左側(cè)面板中對(duì)組件進(jìn)行分組。例如，Widgets組件組只有兩個(gè)組件視頻和地圖，并被定義為如下

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

Component是一個(gè)對(duì)象，它提供可以在畫布上放置的html以及在選擇組件時(shí)可以編輯的屬性，例如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對(duì)象來(lái)編輯屬性，例如文本輸入，選擇，顏色，網(wǎng)格行等。例如，TextInput擴(kuò)展Input對(duì)象并定義為：

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

輸入還需要一個(gè)在編輯器html（在editor.html中）定義為以上是借助瀏覽器翻譯工具，對(duì)官網(wǎng)的文檔進(jìn)行簡(jiǎn)單的翻譯，可能會(huì)有些不夠準(zhǔn)確的地方，感興趣的小伙伴可以直接查看相關(guān)文檔！

設(shè)計(jì)界面預(yù)覽

總結(jié)

VvvebJs是一個(gè)非常強(qiáng)大的網(wǎng)頁(yè)可視化生成構(gòu)建工具，讓不懂網(wǎng)頁(yè)設(shè)計(jì)的小伙伴們也能夠通過(guò)拖拽來(lái)生成美觀大方的網(wǎng)頁(yè)出來(lái)，讓設(shè)計(jì)網(wǎng)頁(yè)就像設(shè)計(jì)圖片一樣，VvvebJs特別適合展示型網(wǎng)頁(yè)，甚至可以不需要代碼就能完成一項(xiàng)復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)，總體來(lái)說(shuō)，VvvebJs是一個(gè)值得嘗試的工具！

原文來(lái)自：https://www.linuxprobe.com/?p=155868

在線咨詢

上一篇：如何用HTML5建企業(yè)網(wǎng)站？（附教程）
下一篇：白鷺引擎馬鑒、張翔：Html5相當(dāng)于手機(jī)端的FLASH

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商