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

您的项目需求