Vue.js實現圖片的隨意拖動
主要程式碼如下:
<template>
<div id="test_3">
<img src="../assets/img/photo.jpg" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style">
</div>
</template>
<script>
export default{
data:function(){
return{
canDrag: false ,
x0:0,
y0:0,
x1:0,
y1:0,
style:null
}
},
methods:{
start:function(e){
//滑鼠左鍵點選
if(e.button==0){
this.canDrag=true;
//記錄滑鼠指標位置
this.x0=e.clientX;
this.y0=e.clientY;
}
},
stop:function(e){
this.canDrag=false;
},
move:function(){
if(this.canDrag==true){
this.x1=e.clientX;
this .y1=e.clientX;
let x=this.x1-this.x0;
let y=this.y1-this.y0;
let img=document.querySelector("#test_3 img");
this.style=`left:${img.offsetLeft+x}px;top:${img.offsetTop+y}px`;
this.x0=this.x1;
this.y0=this.y1;
}
}
}
}
</script>
相關推薦
Vue.js實現圖片的隨意拖動
主要程式碼如下: <template> <div id="test_3"> <img src="../assets/img/photo.jpg
個人筆記005--原生JS實現簡單的拖動滑塊驗證
早上起來後瀏覽網站時看到別人的拖動滑塊驗證,就想著做一個demo,等到有時間把這個優化到到現在的專案(用的是圖片驗證碼)。以下程式碼就是百度之後再修改一下的: <!DOCTYPE html> <html> <head> <meta charset
CSS 實現圖片橫向拖動
在實際開發中需要實現圖片橫向拖動效果,查閱了些資料,現整理下,以便以後使用。 <div class="problemImg"> <img class="problemImg2" src="" alt="">
使用canvas和js實現多種圖形拖動效果
<!doctype html> <html> <head> <title> </title> <meta http-equiv="X-UA-Compatible" content="IE=9
原生JS實現圖片拖拽移動與縮放
rgb asc col ice head () etl ini size <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name
Js事件案例——實現div色塊拖動錄製
描述: 實現一個div50*50的色塊,拖動它生成一個軌跡,鬆手後,這個div會重複你剛才拖動的這個路徑。 效果: 程式碼: <!DOCTYPE html> <html lang="en"> <head> <meta
JS 實現控制元件拖拽/拖動
下面是實現控制元件拖拽的完整程式碼。 (function ($) { var move = false; //標記控制元件是否處於被拖動狀態 var dragOffsetX = 0; //控制元件左邊界和滑鼠X軸的差
使用hammer.js如何做到圖片在拖動及放大拖動時圖片的邊界不在檢視之內
一。何為hammer.js hammerJS是一個優秀的、輕量級的觸屏裝置手勢庫.可以識別由 touch, mouse 和 pointerEvents 觸發的系列手勢。它非常小巧,壓縮後僅有3.96kb,並沒有多餘的指令碼依賴。 二。將hammer.js 加入專案
移動端Vue.js的圖片預覽元件,實現放縮、滑動功能的參考
https://segmentfault.com/a/1190000013193690 segmentfault網址http://www.ml-ui.com/#/docs/i-view ml-ui的vue框架https://www.cnblogs.com/Ed
js 解決movebox移動問題 取消圖片預設拖動事件
html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="te
大神們有知道圖片上怎麼新增多個可以隨意拖動的標記嗎?
想做一個仿intagram圈人效果的樣式,如圖,點選圖片上的沒有標籤的地方會自動新增一個,點選任意一個已經新增的會出一個刪除的按鈕,上面的所有的新增的標籤都可以隨意的在圖片上拖動,但不能拖動到圖片外的位置。。。有沒有大神知道應該怎麼做啊!有demo最好,謝謝了。。。
js:簡單的拖動效果
p s move ntb rec cti release 樣式 left eve 效果演示:https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="w
vue.js實現數據動態響應(Vue.set的應用)
屬性 點擊 屬性。 沒有 log utf-8 創建 http for 在vue裏面,我們操作最多的就是各種數據,在jquery裏面,我們習慣通過下標定向找到數據,然後重新賦值 比如var a[0]=111;(希望上家公司原諒菜鳥的我寫了不少這樣的代碼??) 下面上代碼
cookie結合js 實現記住的拖拽
div 位置 highlight cti top mov type logs 加載 哈嘍!!!我胡漢三又回來啦!!!有木有記掛挪啊!咱們今天說一個 cookie結合JS的小案例哦! 話不多說直接上代碼: <!DOCTYPE html> <html>
CSS/HTML/JS實現圖片輪播
class fff 瀏覽器 tro back 全局 實現圖 func 原理 實現原理 將點擊的a標簽的href屬性值賦給img標簽的src屬性,這樣有個好處,就是如果瀏覽器不支持js的話,點擊a標簽也可跳轉到圖片地址看到圖片,不會影響內容的呈現 註:需要導入jquery
【前端】vue.js實現按鈕的動態綁定
case ctype html 們的 ast pre cal 防止 得到 vue.js實現按鈕的動態綁定 實現效果: 實現代碼以及註釋: <!DOCTYPE html> <html> <head> <title>按鈕
vue.js實現單選框、復選框和下拉框
new type 方式 避免 -- js實現 處理 scrip 按鈕 Vue.js可以很方便的實現數據雙向綁定,所以在處理表單,人機交互方面具有很大的優勢。下邊以單選框、復選框和下拉框為例介紹他們在HTML和Vue.js中的具體實現方式。 一、單選框 在傳統的HTML
JS實現圖片滾動效果
settime .cn itl family .text rgba plus ++ san 源碼參考菜鳥教程:<iframe width="100%" height="300" src="https://c.runoob.com/iframe/2037" allo
js實現鼠標的拖拽效果
郵箱 gin start ott borde mouse ora mar mooc 拖拽效果在我們上網的過程中是很常見的,大家都應該在電腦上面登陸過qq吧,當這個qq的登陸框彈出來的時候,我們是可以進行拖動的。這就是一個拖拽效果 這是我在慕課網上面看到的,我直接拿過來了,地
vue.js實現點擊後動態添加class及刪除同級class
變色 點餐 tail itl 需要 name .cn 好用 get 最近使用vue需要實現一個點餐選擇商品規格的頁面,需要通過vue動態的給被點擊的元素添加class名字,使其變色,其他的刪除class。如圖: 開始在網上找了許多辦法發現不是太好用,最後找到一個發現還是不