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