vue+ts實現元素鼠標拖動效果
本文實例為大傢分享瞭vue+ts實現元素鼠標拖動效果的具體代碼,供大傢參考,具體內容如下
實現效果
相關使用屬性
// clientX 鼠標相對於瀏覽器左上角x軸的坐標; 不隨滾動條滾動而改變; // clientY 鼠標相對於瀏覽器左上角y軸的坐標; 不隨滾動條滾動而改變; // element.offsetTop 指 element距離上方或上層控件的位置,整型,單位像素。 // element.offsetLeft 指 element距離左方或上層控件的位置,整型,單位像素。 // element.offsetWidth 指 element控件自身的寬度,整型,單位像素。 // element.offsetHeight 指 element控件自身的高度,整型,單位像素。 // clientHeigh = height + 上下padding // clientWidth = width+左右padding
實現完整代碼
<template> <div class="to-do-list" ref="parentBox"> <div class="search-title"> <h1 class="add-bold left-box" style="margin-left:35px"> <a-icon type="unordered-list" style="margin-right: 10px;" />元素拖動 </h1> </div> <a-button ref="moveBtn" style="width: 100px;height: 40px;transition:none" class="move-btn" type="primary" >拖動按鈕</a-button > </div> </template> <script lang="ts"> import { Component, Emit, Inject, Prop, Ref, Vue, Watch } from 'vue-property-decorator'; @Component({ components: {}, }) export default class BriberyInformation extends Vue { @Ref() readonly moveBtn; @Ref() readonly parentBox; btnDown() { let box = this.moveBtn.$el; //獲取button的盒子dom元素 let parentBox = this.parentBox; //獲取button父級元素的dom元素 let parentH = parentBox.clientHeight; //獲取button父級元素的height let parentW = parentBox.clientWidth; //獲取button父級元素的width let x, y; let moveX, moveY; //移動距離 let maxX, maxY; //最大移動距離 let isDrop = false; box.onmousedown = e => { x = e.clientX - box.offsetLeft; // e.clientX鼠標相對於瀏覽器左上角x軸的坐標-button上層控件的位置 y = e.clientY - box.offsetTop; isDrop = true; }; document.onmousemove = e => { if (isDrop) { e.preventDefault(); moveX = e.clientX - x; //得到距離左邊移動距離 moveY = e.clientY - y; //得到距離上邊移動距離 //可移動最大距離 maxX = parentW - box.offsetWidth; maxY = parentH - box.offsetHeight; //移動的有效距離計算 //console.log(Math.min(-1, 4, 6, 12));//輸出-1-----多個參數,返回最小值 moveX = Math.min(maxX, Math.max(0, moveX)); moveY = Math.min(maxY, Math.max(0, moveY)); box.style.left = moveX + 'px'; box.style.top = moveY + 'px'; } else { return; } }; document.onmouseup = e => { e.preventDefault(); isDrop = false; }; } mounted() { this.btnDown(); } } </script> <style scoped lang="less"> .to-do-list { position: relative; min-height: 600px; max-height: 600px; width: 600px; overflow: hidden; border: 2px solid black; .move-btn { position: absolute; } } </style>
參考來源:用JavaScript實現div的鼠標拖拽效果
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- JavaScript實現div的鼠標拖拽效果
- JavaScript實現滑塊驗證碼
- JavaScript實現跟隨鼠標移動的盒子
- JavaScript實現鼠標拖拽調整div大小
- vue實現左右滑動效果實例代碼