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、樣式部分（一定要設(shè)置position為absolute）：
.card {
position: absolute;
float: left;
width: 200px;
height: 200px;
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue調(diào)試工具vue-devtools安裝及使用方法
本文主要介紹 vue的調(diào)試工具 vue-devtools 的安裝和使用，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-11-11
近期做的項目比較雜,涉及到前端框架的工作,遇到了許多問題,記錄一下這個比較棘手的問題,下面這篇文章主要給大家介紹了關(guān)于vue3中cookie的詳細使用方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
vue使用$store.commit() undefined報錯的解決
這篇文章主要介紹了vue使用$store.commit() undefined報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
解決vue項目中出現(xiàn)Invalid Host header的問題
這篇文章主要介紹了解決vue項目中出現(xiàn)"Invalid Host header"的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在我們項目開發(fā)中,經(jīng)常會有超長文本溢出提示,未溢出則不提示的場景,接下來我們將一步步用vue指令實現(xiàn)這個需求,文中有詳細的代碼講解,感興趣的朋友跟著小編一起來看看吧2023-08-08
這篇文章主要介紹了vue如何點擊多個tab標簽打開關(guān)閉多個頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了Vue.JS入門教程之事件監(jiān)聽,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
vue中router.beforeEach()的簡單用法舉例
router.beforeEach()一般用來做一些進入頁面的限制,比如沒有登錄,就不能進入某些頁面,只有登錄了之后才有權(quán)限查看某些頁面,下面這篇文章主要給大家介紹了關(guān)于vue中router.beforeEach()的簡單用法舉例,需要的朋友可以參考下2023-01-01
這篇文章主要給大家介紹了關(guān)于vue中銷毀定時器的幾種解決方案,銷毀定時器的操作一般是在beforeDestroy鉤子中進行，根據(jù)定時器的數(shù)量不同可以有多種解決方法,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了詳解Vuex管理登錄狀態(tài),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11