牛X Vue+uniapp 可视化拖拽布局web模板dragUI

天给大家分享一个超厉害的Vue Uniapp可视化拖拽编程项目dragUI。

drag-ui 基于 vuedraggable.js+vue+uniapp 的可视化拖放布局编程。能自动生成项目，自动生成代码，支持导入第三方组件。

效果图

dragUI演示视频

一个简单创建 hello world 界面的介绍视频，帮助大家更快了解项目。

技术栈

vue ^2.5.17 + uniApp
element-ui ^2.12.0 饿了么pc组件库
sortablejs 组件拖拽功能
file-saver 文件保存
ejs ^2.7.1 JavaScript模板引擎
jszip ^3.2.2 JS压缩库
vue-context-menu 基于vue自定义右键菜单

安装使用

# 克隆项目
git clone https://github.com/wozhishilaonanhai/dragUI.git

# 进入dragUI目录
cd dragUI

# 安装依赖包
npm install

# 用HBuilderX打开项目
运行 > 运行到浏览器 > Chrome

项目目录

项目目录注释

作者已经将该插件上传到了插件市场，大家可以下载使用。

https://ext.dcloud.net.cn/plugin?id=1035

store中 componentsInfo 存贮组件的基本信息。

componentsInfo: { // 组件的基本信息
    // id 0- 999  （约定）会根据id来判断是哪个list
    list: [
        {
            name:'按钮',
            id: 0,
            componentName: 'Ibutton',
            iStyle:{},
            iClass: [],
            propsValue: [
                {   
                    label:'值',
                    key:'text',
                    value:'按钮',
                    toDataOrHtml: 'html',
                    type: 'String'
                },
                {
                    label:'类型',
                    key:'type',
                    value:'default',
                    toDataOrHtml: 'html',
                    type:'select',
                    select: [
                        {label: '红色',value: 'warn'},
                        {label: '蓝色',value: 'primary'},
                        {label: '白色',value: 'default'}
                    ]
                },
            ...
            ]
        },
        ...
    ]
}

项目中用到了 element-ui 组件库及第三方UI库 colorUI。

创建新项目

切换页面模式/组件模式

布局预览效果

查看uniapp页面代码

最后附上demo及项目地址

# demo地址
https://wozhishilaonanhai.github.io/dragUI/unpackage/dist/build/h5/index.html

# 仓库地址
https://github.com/wozhishilaonanhai/dragUI

ok，这次就分享到这里。如果小伙伴们感兴趣的话可以去看下哈。

介拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。先点击一个小例子：在用户开始拖动 <p> 元素时执行 JavaScript<p draggable="true" ondragstart="myfunction(event)">拖动我</p>提示：链接和图片默认是可拖动的，不需要 draggable 属性。定义和用法在拖放的过程中会触发以下事件：在拖动目标上触发事件 (源元素):

1、ondragstart - 用户开始拖动元素时触发2、ondrag - 元素正在拖动时触发3、ondragend - 用户完成元素拖动后触发释放目标时触发的事件：1、ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件2、ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
3、ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件4、ondrop - 在一个拖动过程中，释放鼠标键时触发此事件浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。注意:Safari 5.1.2不支持拖动；在拖动元素时，每隔 350 毫秒会触发 ondragover 事件。实例

先贴代码，再逐一解释：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#d1{
width: 110px;
height: 310px;
border: 1px dashed greenyellow;
border-radius: 10px;
float: left;
margin-right: 200px;
}
#d1_a,#d1_b,#d1_c{
width: 100px;
height: 100px;
line-height: 100px;
}
#d1_a{background-color: orangered;}
#d1_b{background-color: yellow;}
#d1_c{background-color: red;}
#d2,#d3,#d4{
width: 150px;
height: 150px;
border-radius: 10px;
border: 1px dashed greenyellow;
float: left;
}
</style>
</head>
<body>
<p draggable="true" ondragstart="myfunction(event)"></p>
<div id="d1">
<div id="d1_a" draggable="true">橘红</div>
<div id="d1_b" draggable="true">黄色</div>
<div id="d1_c" draggable="true">红色</div>
</div>
<div id="d2">橘红</div>
<div id="d3">黄色</div>
<div id="d4">红色</div>
<script>
/* 拖拽元素支持的事件

ondrag 应用于拖拽元素，整个拖拽过程都会调用

ondragstart 应用于拖拽元素，当拖拽开始时调用

ondragleave 应用于拖拽元素，当鼠标离开拖拽元素是调用

ondragend 应用于拖拽元素，当拖拽结束时调用

目标元素支持的事件

ondragenter 应用于目标元素，当拖拽元素进入时调用

ondragover 应用于目标元素，当停留在目标元素上时调用

ondrop 应用于目标元素，当在目标元素上松开鼠标时调用

ondragleave 应用于目标元素，当鼠标离开目标元素时调用

*///拖拽开始document.ondragstart=function (e) {
/*通过dataTransfer来实现数据的存储与获取

setData(format, data)format: 数据的类型： text/html text/uri-listData: 数据：一般来说是字符串值

*/// e.dataTransfer.setData("Text", e.target.id);e.target.style.opacity = 0.5//设置透明度e.dataTransfer.setData("text",e.target.id);
}
//拖拽结束时document.ondragend=function (e) {
e.target.style.opacity=1;
}
//浏览器默认会阻止ondrop事件：我们必须在ondrapover中阻止默认行为document.ondragover=function (e) {
e.preventDefault();
}
//放置document.ondrop=function (e) {
var data=e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>

下面分别来解析下上面代码的意思。设置元素可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<div id="d1_a" draggable="true">橘红</div>
<div id="d1_b" draggable="true">黄色</div>
<div id="d1_c" draggable="true">红色</div>

拖动什么 - ondragstart 和 setData()然后，规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：
document.ondragstart=function (e) {
e.dataTransfer.setData("text",e.target.id);
}

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("d1_1")。放到何处 - ondragoverondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：

document.ondragover=function (e) {
e.preventDefault();
}

何使用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实现拖放单个元素的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！

在线咨询

上一篇：C# 实现调用FFplay播放视频
下一篇：SpringMVC 环境搭建

您的项目需求

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

整合营销服务商

牛X Vue+uniapp 可视化拖拽布局web模板dragUI

技术栈

安装使用

项目目录

您的项目需求