前端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小時內與您取得聯系。

整合營銷服務商