整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
最近接了一個需求，需要實現不同登錄人員可以自定義首頁模塊卡片。簡單來說，就是實現首頁看板模塊的增添與拖拉拽，效果如下：
原生js是支持拖拉拽的，只需要將拖拽的元素的 draggable 屬性設置成 "true"即可，然后就是調用相應的函數即可。
拖拽操作 - Web API 接口參考 | MDN
但是，原生js功能不夠完善，使用起來需要改造的地方很多，因此，選用成熟的第三方插件比較好。
我們的主項目采用的是vue3，,經過一系列對比，最終選擇了 vue-draggable-next這個插件。
vue-draggable-next
vue-draggable-next的周下載量月3萬左右，可以看出是一個比較靠譜的插件。
它的使用方式npmj上也介紹的很詳細：
vue-draggable-next
如果英文的使用Api看起來比較難受，網上還有中文的使用文檔：
vue.draggable.next 中文文檔 - itxst.com
這個插件也有vue2版本和純js版本，其他框架也是也是可以完美使用的。
根據我們的需求，我們應該實現的是分組拖拽，假設我們有三列，那我們要實現的就是這A、B、C三列數據相互拖拽。
我們看看中文官網給的示例：
vue.draggable.next group 例子
看起來很容易，我們只需要寫多個draggable標簽，每個draggable標簽寫入相同的組名即可。
回到代碼中，要想實現一個三列可拖拉拽的模塊列表，我們首先需要引入組件
<script lang="ts" setup>
import { VueDraggableNext } from 'vue-draggable-next'
// ....
</script>
然后定義一個數組儲存數據：
<script lang="ts" setup>
import { VueDraggableNext } from 'vue-draggable-next'
const moduleList = ref([
{
"columnIndex": 1,
"moduleDetail": [
{ "moduleCode": "deviation", "moduleName": "控制失調空間",},
{ "moduleCode": "meeting_pending", "moduleName": "會議待辦",},
{ "moduleCode": "abnormal_events", "moduleName": "異常事件", },
{ "moduleCode": "audit_matters", "moduleName": "事項審批",}
],
},
{
"columnIndex": 2,
"moduleDetail": [
{ "moduleCode": "air_conditioning_terminal", "moduleName": "空調末端", }
],
},
{
"columnIndex": 3,
"moduleDetail": [
{ "moduleCode": "run_broadcast", "moduleName": "運行播報",},
{"moduleCode": "my_schedule", "moduleName": "我的日程", },
{ "moduleCode": "cold_station", "moduleName": "冷站",}
],
}
])
</script>
最后，在代碼中我們使用v-for循環渲染即可
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" group="column" >
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<!-- 模塊內容 -->
</div>
</VueDraggableNext>
</div>
注意上面的html結構，我們循環渲染了三列VueDraggableNext標簽，每個VueDraggableNext標簽內部又通過v-for="(item, index) in moduleColumn.moduleDetail渲染了這個拖拽列內部的所有模塊。我們通過group="column" 讓每個VueDraggableNext組件的組名相同，實現了三個拖拽標簽之間的模塊互相拖拉拽。
正常情況小，我們肯定是希望在某個組件的固定位置才能拖動組件，因此我們需要使用到拖拽組件的handle屬性。
vue.draggable.next屬性說明：
handle | :handle=".mover" 只有當鼠標在class為mover類的元素上才能觸發拖到事件 |
根據屬性說明，我們的代碼實現起來也非常容易了。
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" handle=".move" group="column">
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<div class="move">
拖拽區域
</div>
<!-- 模塊內容 -->
</div>
</VueDraggableNext>
</div>
實際開發中，我么一定會根據接口或者操作動態的更改列表，代碼層也就是更改moduleList的值。非常幸運的是，如果你按照上面的方式寫代碼，當你拖拉拽完畢后，上面的moduleList值會自動更改，我們不用做任何處理！！！這么看，數據的增刪改根本不是問題。
實際開發中，我們可能會遇到一個問題，就是如何動態的去渲染組件，如果你熟悉vue，使用動態組件component就可以實現。
首先，我們需要定義一個模塊列表
import MeetingPending from '../components/meetingPending.vue'
import AbnormalEvents from '../components/abnormalEvents/index.vue'
import MySchedule from '../components/mySchedule.vue'
import TransactionApproval from '../components/transactionApproval.vue'
import RunningBroadcast from '../components/runningBroadcast.vue'
import CodeSite from '../components/codeSite/index.vue'
import MismatchSpace from '../components/mismatchSpace/index.vue'
import AirDevice from '../components/airDevice/index.vue'
// !全量模塊選擇列表
export const allModuleList = [
{ moduleCode: 'meeting_pending', label: '會議待辦', component: MeetingPending },
{ moduleCode: 'my_schedule', label: '我的日程', component: MySchedule },
{ moduleCode: 'audit_matters', label: '事項審批', component: TransactionApproval },
{ moduleCode: 'abnormal_events', label: '異常事件', component: AbnormalEvents },
{ moduleCode: 'deviation', label: '控制失調空間', component: MismatchSpace },
{ moduleCode: 'run_broadcast', label: '運行播報', component: RunningBroadcast },
{ moduleCode: 'cold_station', label: '冷站', component: CodeSite },
{ moduleCode: 'air_conditioning_terminal', label: '空調末端', component: AirDevice }
]
然后根據moduleCode做匹配，動態渲染即可
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" handle=".move" group="column">
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<div class="move">
拖拽區域
</div>
<component :is="getComponentsByCode(item.moduleCode)" ></component>
</div>
</VueDraggableNext>
</div>
如果上面的功能不滿足你的需求，我們可以使用這個組件的其他屬性，完成更多意想不到的效果
如果下面的屬性說明未能完全看明，可以看左邊的對應的菜單查看詳細說明和例子。
屬性名稱 | 說明 |
group | 如果一個頁面有多個拖拽區域，通過設置group名稱可以實現多個區域之間相互拖拽 或者 { name: "...", pull: [true, false, 'clone', array , function], put: [true, false, array , function] } |
sort | 是否開啟排序,如果設置為false,它所在組無法排序 |
delay | 鼠標按下多少秒之后可以拖拽元素 |
touchStartThreshold | 鼠標按下移動多少px才能拖動元素 |
disabled | :disabled= "true",是否啟用拖拽組件 |
animation | 拖動時的動畫效果，如設置animation=1000表示1秒過渡動畫效果 |
handle | :handle=".mover" 只有當鼠標在class為mover類的元素上才能觸發拖到事件 |
filter | :filter=".unmover" 設置了unmover樣式的元素不允許拖動 |
draggable | :draggable=".item" 樣式類為item的元素才能被拖動 |
ghost-class | :ghost-class="ghostClass" 設置拖動元素的占位符類名,你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設置成true |
chosen-class | :ghost-class="hostClass" 被選中目標的樣式，你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設置成true |
drag-class | :drag-class="dragClass"拖動元素的樣式，你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設置成true |
force-fallback | 默認false，忽略HTML5的拖拽行為，因為h5里有個屬性也是可以拖動，你要自定義ghostClass chosenClass dragClass樣式時，建議forceFallback設置為true |
fallback-class | 默認false，克隆選中元素的樣式到跟隨鼠標的樣式 |
fallback-on-body | 默認false，克隆的元素添加到文檔的body中 |
fallback-tolerance | 按下鼠標移動多少個像素才能拖動元素，:fallback-tolerance="8" |
scroll | 默認true,有滾動區域是否允許拖拽 |
scroll-fn | 滾動回調函數 |
scroll-fensitivity | 距離滾動區域多遠時，滾動滾動條 |
scroll-speed | 滾動速度 |
傳送門：vue.draggable.next 中文文檔 - itxst.com
關聯文章：如何實現模塊的錨點定位及閃爍提示：juejin.cn/post/734622…
作者：石小石Orz
鏈接：https://juejin.cn/post/7346121373112811583
這個用戶體驗為王的時代，有各種酷炫主流的畫面操作，毫無疑問是非常重要的，今天我們就來實現鼠標特效——火焰
代碼實現：
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas火焰跟隨鼠標動畫DEMO演示</title>
<style>
html, body {
margin:0;
padding:0;
height: 100%;
}
</style>
</head>
<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<canvas id="fire"></canvas>
<script>
var Fire = function(){
this.canvas = document.getElementById('fire');
this.ctx = this.canvas.getContext('2d');
this.canvas.height = window.innerHeight;
this.canvas.width = window.innerWidth;
this.aFires = [];
this.aSpark = [];
this.aSpark2 = [];
this.mouse = {
x : this.canvas.width * .5,
y : this.canvas.height * .75,
}
this.init();
}
Fire.prototype.init = function()
{
this.canvas.addEventListener('mousemove', this.updateMouse.bind( this ), false);
}
Fire.prototype.run = function(){
this.update();
this.draw();
if( this.bRuning )
requestAnimationFrame( this.run.bind( this ) );
}
Fire.prototype.start = function(){
this.bRuning = true;
this.run();
}
Fire.prototype.stop = function(){
this.bRuning = false;
}
Fire.prototype.update = function(){
this.aFires.push( new Flame( this.mouse ) );
this.aSpark.push( new Spark( this.mouse ) );
this.aSpark2.push( new Spark( this.mouse ) );
for (var i = this.aFires.length - 1; i >= 0; i--) {
if( this.aFires[i].alive )
this.aFires[i].update();
else
this.aFires.splice( i, 1 );
}
for (var i = this.aSpark.length - 1; i >= 0; i--) {
if( this.aSpark[i].alive )
this.aSpark[i].update();
else
this.aSpark.splice( i, 1 );
}
for (var i = this.aSpark2.length - 1; i >= 0; i--) {
if( this.aSpark2[i].alive )
this.aSpark2[i].update();
else
this.aSpark2.splice( i, 1 );
}
}
Fire.prototype.draw = function(){
this.ctx.globalCompositeOperation = "source-over";
this.ctx.fillStyle = "rgba( 15, 5, 2, 1 )";
this.ctx.fillRect( 0, 0, window.innerWidth, window.innerHeight );
this.grd = this.ctx.createRadialGradient( this.mouse.x, this.mouse.y - 200,200,this.mouse.x, this.mouse.y - 100,0 );
this.grd.addColorStop(0,"rgb( 15, 5, 2 )");
this.grd.addColorStop(1,"rgb( 30, 10, 2 )");
this.ctx.beginPath();
this.ctx.arc( this.mouse.x, this.mouse.y - 100, 200, 0, 2*Math.PI );
this.ctx.fillStyle= this.grd;
this.ctx.fill();
this.ctx.font = "15em Amatic SC";
this.ctx.textAlign = "center";
this.ctx.strokeStyle = "rgb(50, 20, 0)";
this.ctx.fillStyle = "rgb(120, 10, 0)";
this.ctx.lineWidth = 2;
this.ctx.strokeText("Fire",this.canvas.width/2, this.canvas.height * .72 );
this.ctx.fillText("Fire",this.canvas.width/2, this.canvas.height * .72 );
this.ctx.globalCompositeOperation = "overlay";//or lighter or soft-light
for (var i = this.aFires.length - 1; i >= 0; i--) {
this.aFires[i].draw( this.ctx );
}
this.ctx.globalCompositeOperation = "soft-light";//"soft-light";//"color-dodge";
for (var i = this.aSpark.length - 1; i >= 0; i--) {
if( ( i % 2 ) === 0 )
this.aSpark[i].draw( this.ctx );
}
this.ctx.globalCompositeOperation = "color-dodge";//"soft-light";//"color-dodge";
for (var i = this.aSpark2.length - 1; i >= 0; i--) {
this.aSpark2[i].draw( this.ctx );
}
}
Fire.prototype.updateMouse = function( e ){
this.mouse.x = e.clientX;
this.mouse.y = e.clientY;
//this.aFires.push( new Flame( this.mouse ) );
}
var Flame = function( mouse ){
this.cx = mouse.x;
this.cy = mouse.y;
this.x = rand( this.cx - 25, this.cx + 25);
this.y = rand( this.cy - 5, this.cy + 5);
this.vy = rand( 1, 3 );
this.vx = rand( -1, 1 );
this.r = rand( 20, 30 );
this.life = rand( 3, 6 );
this.alive = true;
this.c = {
h : Math.floor( rand( 2, 40) ),
s : 100,
l : rand( 80, 100 ),
a : 0,
ta : rand( 0.8, 0.9 )
}
}
Flame.prototype.update = function()
{
this.y -= this.vy;
this.vy += 0.05;
this.x += this.vx;
if( this.x < this.cx )
this.vx += 0.1;
else
this.vx -= 0.1;
if( this.r > 0 )
this.r -= 0.1;
if( this.r <= 0 )
this.r = 0;
this.life -= 0.15;
if( this.life <= 0 ){
this.c.a -= 0.05;
if( this.c.a <= 0 )
this.alive = false;
}else if( this.life > 0 && this.c.a < this.c.ta ){
this.c.a += .08;
}
}
Flame.prototype.draw = function( ctx ){
ctx.beginPath();
ctx.arc( this.x, this.y, this.r * 3, 0, 2*Math.PI );
ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a/20) + ")";
ctx.fill();
ctx.beginPath();
ctx.arc( this.x, this.y, this.r, 0, 2*Math.PI );
ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")";
ctx.fill();
}
var Spark = function( mouse ){
this.cx = mouse.x;
this.cy = mouse.y;
this.x = rand( this.cx -40, this.cx + 40);
this.y = rand( this.cy, this.cy + 5);
this.lx = this.x;
this.ly = this.y;
this.vy = rand( 1, 3 );
this.vx = rand( -4, 4 );
this.r = rand( 0, 1 );
this.life = rand( 4, 5 );
this.alive = true;
this.c = {
h : Math.floor( rand( 2, 40) ),
s : 100,
l : rand( 40, 100 ),
a : rand( 0.8, 0.9 )
}
}
Spark.prototype.update = function()
{
this.lx = this.x;
this.ly = this.y;
this.y -= this.vy;
this.x += this.vx;
if( this.x < this.cx )
this.vx += 0.2;
else
this.vx -= 0.2;
this.vy += 0.08;
this.life -= 0.1;
if( this.life <= 0 ){
this.c.a -= 0.05;
if( this.c.a <= 0 )
this.alive = false;
}
}
Spark.prototype.draw = function( ctx ){
ctx.beginPath();
ctx.moveTo( this.lx , this.ly);
ctx.lineTo( this.x, this.y);
ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a / 2) + ")";
ctx.lineWidth = this.r * 2;
ctx.lineCap = 'round';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo( this.lx , this.ly);
ctx.lineTo( this.x, this.y);
ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")";
ctx.lineWidth = this.r;
ctx.stroke();
ctx.closePath();
}
rand = function( min, max ){ return Math.random() * ( max - min) + min; };
onresize = function () { oCanvas.canvas.width = window.innerWidth; oCanvas.canvas.height = window.innerHeight; };
var oCanvas;
init = function()
{
oCanvas = new Fire();
oCanvas.start();
}
window.onload = init;
</script>
</body>
</html>
學習從來不是一個人的事情，要有個相互監督的伙伴，想要學習或交流前端問題的小伙伴可以私信回復小明“學習” 獲取前端學習資料，一起學習！
提到拖拽，我們都很熟悉，那么拖放呢？一字之差，代表的意義是不一樣的，拖拽就是拉著走，拖放就是有拖，有放，我們都知道原生 JS 拖拽效果的缺點：1. 代碼相對復雜與冗余2. 僅限于在瀏覽器內的元素間拖放3、不能實現跨頁面的拖放
所以H5就出現了拖放技術，與 JS 原生相比 HTML5 拖放的優勢：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
