Vue實現(xiàn)開關(guān)按鈕拖拽效果
更新時間:2020年09月22日 10:30:25 作者:WuHuiNing
這篇文章主要為大家詳細介紹了Vue實現(xiàn)開關(guān)按鈕拖拽效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xiàn)開關(guān)按鈕拖拽效果的具體代碼,供大家參考,具體內(nèi)容如下
css:
<style> .box { position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background: red; } .box2 { position: absolute; left: 400px; top: 100px; width: 100px; height: 100px; background: green; } </style>
html:
<div id="app"> <div class="box" v-drag="isDrag"></div> <div class="box2" v-drag:fn.limit.b="isDrag"></div> <button @click="isDrag = !isDrag">{{isDrag}}</button> </div>
js:
<script src="vue.js"></script> <script> // 組件 Vue.directive('drag', { bind(el, {value, arg, modifiers}) { console.log(value, arg, modifiers) el._value = value; el._isDrag = false; el.addEventListener('mousedown', function(e) { if (!el._value) return; el._isDrag = true; el._x = e.clientX - el.offsetLeft; el._y = e.clientY - el.offsetTop; e.preventDefault(); }); document.addEventListener('mousemove', function(e) { if (el._isDrag) { let l = e.clientX - el._x; let t = e.clientY - el._y; if (modifiers.limit) { if (l < 0) { l = 0; } if (t < 0) { t = 0; } } el.style.left = l + 'px'; el.style.top = t + 'px'; } }); document.addEventListener('mouseup', function(e) { el._isDrag = false; }); }, componentUpdated(el, {value}) { console.log('更新了', value); el._value = value; } }); let app = new Vue({ el: '#app', data: { isDrag: false } }); </script>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3項目vite.config.js配置代理、端口、打包名以及圖片壓縮
這篇文章主要給大家介紹了關(guān)于vue3項目vite.config.js配置代理、端口、打包名以及圖片壓縮的相關(guān)資料,因為3.0版本中vue已經(jīng)內(nèi)置了很多關(guān)于webpack的配置,一般情況下開箱即用,需要修改則可以在vue.config.js文件中完成,需要的朋友可以參考下2023-12-12element ui 表格動態(tài)列顯示空白bug 修復(fù)方法
今天小編就為大家分享一篇element ui 表格動態(tài)列顯示空白bug 修復(fù)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09詳解element-ui表格中勾選checkbox,高亮當前行
這篇文章主要介紹了詳解element-ui表格中勾選checkbox,高亮當前行,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09vue使用element實現(xiàn)上傳圖片和修改圖片功能
前幾天做到一個關(guān)于圖片上傳功能,下面這篇文章主要給大家介紹了關(guān)于vue使用element實現(xiàn)上傳圖片和修改圖片功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07vue+element實現(xiàn)動態(tài)加載表單
這篇文章主要為大家詳細介紹了vue+element實現(xiàn)動態(tài)加載表單,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-12-12