整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天給大家分享一個超厲害的Vue Uniapp可視化拖拽編程項目dragUI。
drag-ui 基于 vuedraggable.js+vue+uniapp 的可視化拖放布局編程。能自動生成項目，自動生成代碼，支持導(dǎo)入第三方組件。
效果圖
dragUI演示視頻
一個簡單創(chuàng)建 hello world 界面的介紹視頻，幫助大家更快了解項目。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
# 克隆項目
git clone https://github.com/wozhishilaonanhai/dragUI.git
# 進(jìn)入dragUI目錄
cd dragUI
# 安裝依賴包
npm install
# 用HBuilderX打開項目
運(yùn)行 > 運(yùn)行到瀏覽器 > Chrome項目目錄注釋
作者已經(jīng)將該插件上傳到了插件市場，大家可以下載使用。
https://ext.dcloud.net.cn/plugin?id=1035store中 componentsInfo 存貯組件的基本信息。
componentsInfo: { // 組件的基本信息
// id 0- 999 （約定）會根據(jù)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: '藍(lán)色',value: 'primary'},
{label: '白色',value: 'default'}
]
},
...
]
},
...
]
}項目中用到了 element-ui 組件庫及第三方UI庫 colorUI。
創(chuàng)建新項目
切換頁面模式/組件模式
布局預(yù)覽效果
查看uniapp頁面代碼
最后附上demo及項目地址
# demo地址
https://wozhishilaonanhai.github.io/dragUI/unpackage/dist/build/h5/index.html
# 倉庫地址
https://github.com/wozhishilaonanhai/dragUIok，這次就分享到這里。如果小伙伴們感興趣的話可以去看下哈。
介拖放是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。先點擊一個小例子：在用戶開始拖動 <p> 元素時執(zhí)行 JavaScript<p draggable="true" ondragstart="myfunction(event)">拖動我</p>提示： 鏈接和圖片默認(rèn)是可拖動的，不需要 draggable 屬性。定義和用法在拖放的過程中會觸發(fā)以下事件：在拖動目標(biāo)上觸發(fā)事件 (源元素):
1、ondragstart - 用戶開始拖動元素時觸發(fā)2、ondrag - 元素正在拖動時觸發(fā)3、ondragend - 用戶完成元素拖動后觸發(fā)釋放目標(biāo)時觸發(fā)的事件：1、ondragenter - 當(dāng)被鼠標(biāo)拖動的對象進(jìn)入其容器范圍內(nèi)時觸發(fā)此事件2、ondragover - 當(dāng)某被拖動的對象在另一對象容器范圍內(nèi)拖動時觸發(fā)此事件
3、ondragleave - 當(dāng)被鼠標(biāo)拖動的對象離開其容器范圍內(nèi)時觸發(fā)此事件4、ondrop - 在一個拖動過程中，釋放鼠標(biāo)鍵時觸發(fā)此事件瀏覽器支持Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動。注意:Safari 5.1.2不支持拖動；在拖動元素時，每隔 350 毫秒會觸發(fā) 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 應(yīng)用于拖拽元素，整個拖拽過程都會調(diào)用
ondragstart 應(yīng)用于拖拽元素，當(dāng)拖拽開始時調(diào)用
ondragleave 應(yīng)用于拖拽元素，當(dāng)鼠標(biāo)離開拖拽元素是調(diào)用
ondragend 應(yīng)用于拖拽元素，當(dāng)拖拽結(jié)束時調(diào)用
目標(biāo)元素支持的事件
ondragenter 應(yīng)用于目標(biāo)元素，當(dāng)拖拽元素進(jìn)入時調(diào)用
ondragover 應(yīng)用于目標(biāo)元素，當(dāng)停留在目標(biāo)元素上時調(diào)用
ondrop 應(yīng)用于目標(biāo)元素，當(dāng)在目標(biāo)元素上松開鼠標(biāo)時調(diào)用
ondragleave 應(yīng)用于目標(biāo)元素，當(dāng)鼠標(biāo)離開目標(biāo)元素時調(diào)用
*///拖拽開始document.ondragstart=function (e) {
/*通過dataTransfer來實現(xiàn)數(shù)據(jù)的存儲與獲取
setData(format, data)format: 數(shù)據(jù)的類型： text/html text/uri-listData: 數(shù)據(jù)： 一般來說是字符串值
*/// e.dataTransfer.setData("Text", e.target.id);e.target.style.opacity = 0.5//設(shè)置透明度e.dataTransfer.setData("text",e.target.id);
}
//拖拽結(jié)束時document.ondragend=function (e) {
e.target.style.opacity=1;
}
//瀏覽器默認(rèn)會阻止ondrop事件：我們必須在ondrapover中阻止默認(rèn)行為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>下面分別來解析下上面代碼的意思。設(shè)置元素可拖放首先，為了使元素可拖動，把 draggable 屬性設(shè)置為 true ：
<div id="d1_a" draggable="true">橘紅</div>
<div id="d1_b" draggable="true">黃色</div>
<div id="d1_c" draggable="true">紅色</div>拖動什么 - ondragstart 和 setData()然后，規(guī)定當(dāng)元素被拖動時，會發(fā)生什么。在上面的例子中，ondragstart 屬性調(diào)用了一個函數(shù)，drag(event)，它規(guī)定了被拖動的數(shù)據(jù)。
dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：
document.ondragstart=function (e) {
e.dataTransfer.setData("text",e.target.id);
}
在這個例子中，數(shù)據(jù)類型是 "Text"，值是可拖動元素的 id ("d1_1")。放到何處 - ondragoverondragover 事件規(guī)定在何處放置被拖動的數(shù)據(jù)。默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式。這要通過調(diào)用 ondragover 事件的 event.preventDefault() 方法：
document.ondragover=function (e) {
e.preventDefault();
}
何使用HTML5實現(xiàn)拖放單個元素？本篇文章將給大家介紹關(guān)于實現(xiàn)拖放HTML元素的JavaScript代碼，下面一起來看具體的實現(xiàn)內(nèi)容。
通過使用HTML5的拖放功能，您可以拖放HTML頁面元素
我們來看具體的示例
代碼如下
SimpleDragDrop.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleDragDrop.css" />
<script>
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>
<body onload="load();">
<div class="box" draggable="true"></div>
<div id="dropzone" class="dropzone">
</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" draggable="true"></div>
<div id="dropzone" class="dropzone"></div>
頁面上顯示兩個上述的div，可以使用class =“box”，id =“dropzone”拖動的對象是放置接受區(qū)域的div。對于可拖動對象，可以將draggable =“true”設(shè)置為可拖動對象。
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';
}
上面的代碼為每個元素分配拖放事件。
對于要拖動的元素，我們設(shè)置“dragstart”事件。啟動拖動時，將執(zhí)行onDragStart函數(shù)。
對于要刪除的元素，設(shè)置“dragover”“drop”事件。當(dāng)拖動的元素進(jìn)入拖放區(qū)域，onDragOver功能被執(zhí)行，當(dāng)元件被丟棄onDrop功能將被執(zhí)行。
在dragstart的情況下，你必須編寫代碼來設(shè)置dataTransfer對象的值。它不使用插入dataTransfer中的值，但是如果沒有這個代碼的話，在沒有數(shù)據(jù)的情況下也會實現(xiàn)。
運(yùn)行結(jié)果
使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
拖動頂部的方框。如果將其拖動到底部框架，框架中將顯示“onDragOver”。
將其放在框架中時，框架中會顯示“onDrop”字符。
示例2：添加了事件的拖放元素的方法
代碼如下
SimpleDragDrop2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleDragDrop2.css" />
<script>
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 onload="load();">
<div id="box" class="box" draggable="true"></div>
<div id="dropzone" class="dropzone"></div>
</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 class="box" draggable="true"></div>
<div id="dropzone" class="dropzone"></div>
如上例所示，頁面上顯示兩頁DIV。對于可拖動對象，請將draggable =“true”設(shè)置為可拖動對象。
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”事件被分配給拖動側(cè)的元素。一旦開始拖動，調(diào)用ondstart函數(shù)，拖動結(jié)束后，將被調(diào)用ondos agEs函數(shù)。
“dragenter”，“dragover”，“dragleave”和“drop”事件被分配給要拖動的元素。當(dāng)拖動的元素進(jìn)入拖放區(qū)域，執(zhí)行onDragEnter函數(shù)的功能，在拖拽區(qū)域內(nèi)拖動的狀態(tài)下執(zhí)行onDragOver函數(shù)，從拖拽的區(qū)域出來的話，將執(zhí)行OnDragLeave函數(shù)。下拉拖動的元素時，將執(zhí)行onDrop函數(shù)。
運(yùn)行結(jié)果
使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
拖動紅色區(qū)域的方形區(qū)域。字符“onDragStart”顯示在該區(qū)域中。
當(dāng)你松開拖動時，你會看到“onDragEnd”的角色紅框中的區(qū)域。
再次拖動紅框區(qū)域。當(dāng)拖放到底部區(qū)域時，在放置區(qū)域中顯示字符“onDragOver”。
當(dāng)你放開拖到拖放區(qū)域紅框的區(qū)域，你會看到“onDrop”的字符在底部區(qū)域中。
再次拖動紅框以與放置區(qū)域重疊。將顯示“onDragOver”字符。
拖動紅框并將其拖動到拖放區(qū)域之外。放置區(qū)域中的字符顯示變?yōu)椤皁nDragLeave”。
以上就是如何使用HTML5實現(xiàn)拖放單個元素的詳細(xì)內(nèi)容，更多請關(guān)注其它相關(guān)文章！
更多技巧請《轉(zhuǎn)發(fā) + 關(guān)注》哦！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
