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

好啦, 今天的分享就到這啦, 如果文章對你有幫助, 歡迎「點贊」 + 「評論」, 鼓勵作者創造更優質的內容~

何使用HTML5實現拖放單個元素？本篇文章將給大家介紹關于實現拖放HTML元素的JavaScript代碼，下面一起來看具體的實現內容。

通過使用HTML5的拖放功能，您可以拖放HTML頁面元素

我們來看具體的示例

代碼如下

SimpleDragDrop.html

<!DOCTYPE html>

<html>

<head>

function load() {

var box=document.querySelector('.box');

box.addEventListener('dragstart', onDragStart, false);

var zone=document.querySelector('.dropzone');

zone.addEventListener('dragover', onDragOver, false);

zone.addEventListener('drop', onDrop, false);

}

function onDragStart(e) {

e.dataTransfer.setData('text', this.id);

}

function onDragOver(e) {

e.preventDefault();

this.textContent='onDragOver';

}

function onDrop(e) {

e.preventDefault();

this.textContent='onDrop';

}

</script>

</head>

</div>

</body>

</html>

SimpleDragDrop.css

.box {

width:32px;

height:32px;

border:solid 1px #002f9f;

}

.dropzone {

margin-top:16px;

margin-bottom:16px;

width: 280px;

height: 64px;

border: solid 1px #808080;

}

說明：

頁面上顯示兩個上述的div，可以使用class=“box”，id=“dropzone”拖動的對象是放置接受區域的div。對于可拖動對象，可以將draggable=“true”設置為可拖動對象。

function load() {

var box=document.querySelector('.box');

box.addEventListener('dragstart', onDragStart, false);

var zone=document.querySelector('.dropzone');

zone.addEventListener('dragover', onDragOver, false);

zone.addEventListener('drop', onDrop, false);

}

function onDragStart(e) {

e.dataTransfer.setData('text', this.id);

}

function onDragOver(e) {

e.preventDefault();

this.textContent='onDragOver';

}

function onDrop(e) {

e.preventDefault();

this.textContent='onDrop';

}

上面的代碼為每個元素分配拖放事件。

對于要拖動的元素，我們設置“dragstart”事件。啟動拖動時，將執行onDragStart函數。

對于要刪除的元素，設置“dragover”“drop”事件。當拖動的元素進入拖放區域，onDragOver功能被執行，當元件被丟棄onDrop功能將被執行。

在dragstart的情況下，你必須編寫代碼來設置dataTransfer對象的值。它不使用插入dataTransfer中的值，但是如果沒有這個代碼的話，在沒有數據的情況下也會實現。

運行結果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

拖動頂部的方框。如果將其拖動到底部框架，框架中將顯示“onDragOver”。

將其放在框架中時，框架中會顯示“onDrop”字符。

示例2：添加了事件的拖放元素的方法

代碼如下

SimpleDragDrop2.html

<!DOCTYPE html>

<html>

<head>

function load() {

var box=document.querySelector('.box');

box.addEventListener('dragstart', onDragStart, false);

box.addEventListener('dragend', onDragEnd, false);

var box=document.querySelector('.dropzone');

box.addEventListener('dragenter', onDragEnter, false);

box.addEventListener('dragover', onDragOver, false);

box.addEventListener('dragleave', onDragLeave, false);

box.addEventListener('drop', onDrop, false);

}

function onDragStart(e) {

e.dataTransfer.setData('Text', this.id);

this.textContent='onDragStart';

}

function onDragEnd(e) {

this.textContent='onDragEnd';

}

function onDragEnter(e) {

this.textContent='onDragEnter';

}

function onDragOver(e) {

e.preventDefault();

this.textContent='onDragOver';

}

function onDragLeave(e) {

this.textContent='onDragLeave';

}

function onDrop(e) {

e.preventDefault();

this.textContent='onDrop';

}

</script>

</head>

</body>

</html>

SimpleDragDrop.css

.box {

width:32px;

height:32px;

border:solid 1px #d01313;

}

.dropzone {

margin-top:16px;

margin-bottom:16px;

width: 280px;

height: 64px;

border: solid 1px #808080;

}

說明：

如上例所示，頁面上顯示兩頁DIV。對于可拖動對象，請將draggable=“true”設置為可拖動對象。

function load() {

var box=document.querySelector('.box');

box.addEventListener('dragstart', onDragStart, false);

box.addEventListener('dragend', onDragEnd, false);

var box=document.querySelector('.dropzone');

box.addEventListener('dragenter', onDragEnter, false);

box.addEventListener('dragover', onDragOver, false);

box.addEventListener('dragleave', onDragLeave, false);

box.addEventListener('drop', onDrop, false);

}

function onDragStart(e) {

e.dataTransfer.setData('Text', this.id);

this.textContent='onDragStart';

}

function onDragEnd(e) {

this.textContent='onDragEnd';

}

function onDragEnter(e) {

this.textContent='onDragEnter';

}

function onDragOver(e) {

e.preventDefault();

this.textContent='onDragOver';

}

function onDragLeave(e) {

this.textContent='onDragLeave';

}

function onDrop(e) {

e.preventDefault();

this.textContent='onDrop';

}

上面的代碼為每個元素分配拖放事件。

“dragstart”和“dragend”事件被分配給拖動側的元素。一旦開始拖動，調用ondstart函數，拖動結束后，將被調用ondos agEs函數。

“dragenter”，“dragover”，“dragleave”和“drop”事件被分配給要拖動的元素。當拖動的元素進入拖放區域，執行onDragEnter函數的功能，在拖拽區域內拖動的狀態下執行onDragOver函數，從拖拽的區域出來的話，將執行OnDragLeave函數。下拉拖動的元素時，將執行onDrop函數。

運行結果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

拖動紅色區域的方形區域。字符“onDragStart”顯示在該區域中。

當你松開拖動時，你會看到“onDragEnd”的角色紅框中的區域。

再次拖動紅框區域。當拖放到底部區域時，在放置區域中顯示字符“onDragOver”。

當你放開拖到拖放區域紅框的區域，你會看到“onDrop”的字符在底部區域中。

再次拖動紅框以與放置區域重疊。將顯示“onDragOver”字符。

拖動紅框并將其拖動到拖放區域之外。放置區域中的字符顯示變為“onDragLeave”。

以上就是如何使用HTML5實現拖放單個元素的詳細內容，更多請關注其它相關文章！

更多技巧請《轉發 + 關注》哦！

簡介】

拖放是一種常見的特性, 屬于html5標準的一部分, 即抓取對象以后拖動到另一個位置, 在html5中, 任何元素都可被設置拖放。首先, 我們要給需要拖動的HTML元素啟用拖動功能, 設置屬性draggable="true",

提示：a標簽和img標簽默認是啟用該屬性的, 可不需要設置draggable屬性。

draggable有三個值, 如下所示：

draggable=true(元素可以被拖動)

draggable=false(元素不能被拖動)

draggable=auto(瀏覽器可以自主決定某個元素是否可以被拖動)

【用法】

當我們用鼠標拖拽目標元素過程中會觸發的事件：

ondragstart：用戶按下鼠標開始拖動時觸發

ondrag：用戶正在拖動時反復觸發

ondragend：用戶結束拖動后觸發

當拖動元素進入目標容器內觸發的事件：

ondragenter：鼠標拖動對象進入釋放區時觸發

ondragover：被拖動物體進入目標容器內移動時反復觸發

ondragleave：拖動對象在釋放區沒有釋放就離開容器時觸發

ondrop：被拖動物體在目標容器內釋放時觸發

ondragenter和ondragover事件的默認行為是拒絕接受任何被拖放的項目, 所以我們必須要做的最重要的事情就是防止這種默認行為的發生。

因此, 我們只需要在這兩個事件調用的函數中傳入event對象, 使用event.preventDefault()就可取消這種默認行為；舉個例子, 在drop事件時, Firefox瀏覽器會關閉網頁, 轉而顯示被拖動圖片img元素src所引用的地址。

取消元素默認行為：

function ondragenterFun(e){

e.preventDefault();

}

function ondragoverFun(e){

e.preventDefault();

}

在event對象中, 我們會使用dataTransfer屬性來獲取DataTransfer對象, 在DataTransfer對象中有我們操作數據的屬性和方法, 具體如下：

datatransfer：轉移釋放元素的數據到釋放區, 返回Datatransfer對象

event.dataTransfer //返回DataTransfer對象

DataTransfer對象的屬性：

files：處理從操作系統拖動并釋放到釋放區的文件；

types：返回一個字符串數組, 該對象包含了dataTransfer對象中數據的所有類型；

items：返回DataTransferItems對象, 該對象代表了拖動數據；

dropEffect：設置拖放目標允許發生的拖放行為, 如果此處設置的拖放行為不在effectAllowed屬性設置的可拖放行為內, 拖放操作將會失敗。該屬性值只允許為"null"、"copy"、"link"或"move"；

effectAllowed：設置拖動元素允許發生的拖動行為, 該屬性值可為"none"、"copy"、"copyLink"、"copyMove"、"link"、"linkMove"、"move"、"all"或"uninitialized"；

DataTransfer對象的方法：

setData( format , data )：將指定格式的數據賦值給dataTransfer對象，參數format定義數據的格式也就是數據的類型，data為待賦值的數據。

getData( format )：從dataTransfer對象中獲取指定格式的數據，format代表數據格式，data為數據。

clearData( [format] )：從dataTransfer對象中刪除指定格式的數據，參數可選，若不給參數，將刪除對象中所有的數據。

setDragImage(el, x, y)：設置拖放操作的圖標，其中el代表自定義圖標，x代表圖標與鼠標在水平方向上的距離，y代表圖標與鼠標在垂直方向上的距離。

了解了H5拖動使用的api以后我們接下來看一個綜合的案例, 功能如下：

1)、實現圖片拖動功能；

2)、實現圖片復制功能；

3)、過濾不能拖動的元素；

4)、實現拖動本地圖片到瀏覽器指定位置；

公共css部分：

<style>

#dropIn{

border:1px solid #AAAAAA;

height:100px;

margin-bottom: 10px;

padding: 10px;

}

#dropIn>img{

margin-right: 10px;

border:2px solid deepskyblue;

}

img{

width:100px;

border-radius: 10px;

border:2px solid red;

}

</style>

html部分：

<body>

</body>

js部分：

<script type="text/javascript">
var darggID;
function getId(el){
return document.getElementById(el)
}
var dropId1=getId("drop1");
var dropInId=getId("dropIn");
//取消事件默認行為
dropInId.ondragenter=cancelDefault;
dropInId.ondragover=cancelDefault; //綁定拖動元素釋放時觸發的事件
dropInId.ondrop=drop; //綁定
dropId1.ondragstart=startFun;
function cancelDefault(ev){ //取消默認行為
ev.preventDefault();
}
function startFun(ev){
darggID=ev.target.id;
//獲取被拖動元素的id
//從源對象上的事件處理中保存數據，數據類型為"Text"
ev.dataTransfer.setData("Text",darggID);
}
function drop(ev){
ev.preventDefault();
// 從目標對象上的事件處理中讀取"Text"類型數據
var data=ev.dataTransfer.getData("Text");
// 插入到目標對象中
ev.target.appendChild(document.getElementById(data));
}
</script>

接下來我們添加兩張圖, "drop2"是實現復制的圖片, "drop3"是既不能復制也不能拖動的圖片；

添加js代碼：

//獲取頁面元素

var dropId2=getId("drop2");

var dropId3=getId("drop3");

//綁定事件

dropId2.ondragstart=startFun;dropId3.ondragstart=startFun;

//修改drop函數為

function drop(ev){

ev.preventDefault();

// 從目標對象上的事件處理中讀取"Text"類型數據

var data=ev.dataTransfer.getData("Text");

if(data=='drop1'){

//移動

ev.target.appendChild(document.getElementById(data));

}

if(data=='drop2'){//復制

var nreEl=document.getElementById(darggID).cloneNode(false);

getId("dropIn").appendChild(nreEl);

}

if(data=='drop3'){//過濾drop3，drop3不做任何操作

alert('過濾drop3')

}

接下來我們實現拖動本地圖片到瀏覽器, 我們就將圖片拖動到id為"dropIn"的這個div中；添加js:

/*document 監聽drop 并阻止瀏覽器打開客戶端的圖片*/

document.ondragover=function (e) {

//只有在ondragover中阻止默認行為

e.preventDefault();

};

document.ondrop=function (e) {

//阻止 document.ondrop的默認行為

e.preventDefault();

};

//dropIn是div的id

dropIn.ondrop=function (e) {

var list=e.dataTransfer.files;

for (var i=0; i < list.length; i++) {

var f=list[i];

reader(f);

}

};

function reader(f) {

var reader=new FileReader();

//讀取數據

reader.readAsDataURL(f);

reader.onload=function () {

var img=new Image();

img.src=reader.result;

dropIn.appendChild(img);

}

【瀏覽器支持】

目前只有Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari5支持拖放，在 Safari5.1.2 中不支持拖放。

最后再和大家分享一個技巧, 這種拖動行為還能跨瀏覽器工作, 這里說的跨瀏覽器不是瀏覽器之間的跨窗口, 而是可以從Chrome瀏覽器拖動到Firefox瀏覽器, 因為拖放功能的支持是集成在操作系統里面的, 有著相同的特性。

在線咨詢

上一篇：基于Javascript編寫的開源Markdown和
下一篇：一種基于pyppeteer的新浪微博登錄方式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端10大開源拖拽排序庫匯總，讓搭建，更簡單

1. dragula

2. Interact.js

3. react-dnd

4. Sortable

5. scriptaculous

6. react-beautiful-dnd

7. react-grid-dnd

8. dnd kit

可視化搭建解決方案

1. H5-dooring

2. Formily

3. V6.Dooring

您的項目需求