vue實(shí)現(xiàn)圖片拖拽功能
更新時(shí)間：2021年11月10日 10:36:26 作者：柯基小肥臀
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)圖片拖拽功能的具體代碼，供大家參考，具體內(nèi)容如下
1、主要涉及到的元素知識(shí)，示意圖：
2、js代碼部分：
directives: {
drag: {
// 指令的定義
bind: function(el) {
// 獲取當(dāng)前元素
let oDiv = el;
oDiv.onmousedown = (e) => {
// 算出鼠標(biāo)相對(duì)元素的位置
let disX = e.clientX - oDiv.offsetLeft;
let disY = e.clientY - oDiv.offsetTop;
document.onmousemove = (e) => {
// 用鼠標(biāo)的位置減去鼠標(biāo)相對(duì)元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
oDiv.style.left = left + 'px';
oDiv.style.top = top + 'px';
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
}
}
3、使用方法：
<div class="card" v-drag id="card"> <img src="../assets/logo.png" > </div>
4、樣式部分（一定要設(shè)置position為absolute）：
.card {
position: absolute;
float: left;
width: 200px;
height: 200px;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
axios請(qǐng)求中以params或body形式傳遞參數(shù)的區(qū)別淺析
最近在做自己項(xiàng)目中,做一個(gè)非常簡(jiǎn)單的新增用戶場(chǎng)景,但是使用原生axios發(fā)送post請(qǐng)求的時(shí)候,還是踩了不少坑的,下面這篇文章主要給大家介紹了關(guān)于axios請(qǐng)求中以params或body形式傳遞參數(shù)的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-04-04
解決vue的過(guò)渡動(dòng)畫(huà)無(wú)法正常實(shí)現(xiàn)問(wèn)題
今天小編就為大家分享一篇解決vue的過(guò)渡動(dòng)畫(huà)無(wú)法正常實(shí)現(xiàn)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
本文主要介紹了ElementUI中el-tabs事件綁定的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個(gè)方法問(wèn)題
這篇文章主要介紹了vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個(gè)方法問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue中使用gojs/jointjs的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue使用keep-alive保持滾動(dòng)條位置的實(shí)現(xiàn)方法
這篇文章主要介紹了vue使用keep-alive保持滾動(dòng)條位置的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本篇文章主要介紹了Vue2.0 組件傳值通訊的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
ElementPlus el-message-box樣式錯(cuò)位問(wèn)題及解決
這篇文章主要介紹了ElementPlus el-message-box樣式錯(cuò)位問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了rollup打包vue組件并發(fā)布到npm,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
vue pages 多入口項(xiàng)目 + chainWebpack 全局引用縮寫(xiě)說(shuō)明
這篇文章主要介紹了vue pages 多入口項(xiàng)目 + chainWebpack 全局引用縮寫(xiě)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09