图片位置细节图，图片拖拽

最新推荐文章于 2022-07-19 17:09:49 发布
最新推荐文章于 2022-07-19 17:09:49 发布
阅读量96 收藏
点赞数
分类专栏： 拖拽 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44091061/article/details/117988664
版权

图片拖拽，图片位置细节图

在这里插入图片描述

<template>
	<div>
		//背景图
		<div :style="styleObjectWrapper" ref="imgWrapper" class="imgWrapper" @mouseover="onMouseOver">
			<div
	            :style="styleObjectImg"
	            @mousedown="onMouseDown"
	            @mousemove="onMouseMove($event)"
	            @mouseup="onMouseUp"
	            @mouseout="onMouseOut"
	            @dragstart="onDragStart"
	            @mouseover="onMouseOver"
	            @contextmenu.prevent
	          >
	    	</div>
    	</div>
    	//图片缩略图	
    	<div class="detailImg" :style="styleDetailImg" ref="detailImg">
    	  //视图缩略图
          <div
            class="showImg"
            ref="showImg"
            @mousemove="onMouseMoveShowImg($event)"
            @mousedown="onMouseDownImg"
            @mouseup="onMouseUpImg"
            @mouseout="onMouseOutImg"
            @dragstart="onDragStartImg"
            @mouseover="onMouseOverImg"
            @contextmenu.prevent
            :style="{
              'width': imgShowWidth+'px',
              'height':imgShowHeight+'px',
              'border':'1px solid red',
              'position':'absolute',
              'top':top+'px',
              'left':left+'px'
            }">
          </div>
        </div>
	</div>
</template>
<script>
	export default {
		data () {
    		return {
    		/*
		      imgDetailWidth 大图的缩略图宽度
		      ratio:缩略图宽度比例
		      positionDetailX：缩略图展示部分X偏移量
		      positionDetailY: 缩略图展示部分X偏移量
		      isShowDiv：是否展示缩略图
		      imgWrapperWidth: 图片包裹元素宽度
		      imgWrapperHeight: 图片包裹元素高度
		      left：移动背景图展示部分左右偏移
		      top：移动背景图展示部分左右偏移
		      imgWidth: 图片宽度
		      imgHeight: 图片高度
		      imgShowWidth: 缩略图展示部分宽度
		      imgShowHeight: 缩略图展示高度
		      positionX: 背景图部分X偏移量
		      positionY: 背景图部分Y偏移量
		      positionDetailX：缩略图展示部分X偏移量
		      positionDetailY: 缩略图展示部分X偏移量
		      onMouseDownFlag: 背景图按下
		      onMouseOverFlag: 背景图抬起
		      onMouseOverImgFlag: 缩略图展示部分按下
		      onMouseDownImgFlag: 缩略图展示部分抬起
		      styleDetailImg：缩略图样式
		       */
		      doMove: false,
    		  imgDetailWidth: 0,
		      ratio: 0,
		      screenWidth: document.body.clientWidth,
		      screenHeight: document.body.clientHeight,
		      screenSize: 0,
		      isShowDiv: true,
		      computedHeight: '',
		      computedWidth: '',
		      imgWrapperWidth: '',
		      imgWrapperHeight: '',
		      detailImgWidth: '',
		      detailImgHeight: '',
		      showImgWidth: '',
		      showImgHeight: '',
		      // showImgOffsetX: '',
		      // showImgOffsetY: '',
		      left: 0,
		      top: 0,
		      imgWidth: 0,
		      imgHeight: 0,
		      imgShowWidth: 0,
		      imgShowHeight: 0,
		      positionX: 0,
		      positionY: 0,
		      // 详情图偏移量
		      positionDetailX: 0,
		      positionDetailY: 0,
		      onMouseDownFlag: false,
		      onMouseOverFlag: false,
		      onMouseOverImgFlag: false,
		      onMouseDownImgFlag: false,
		      styleObjectWrapper: {
		        overflow: 'hidden',
		        position: 'relative',
		        backgroundColor: '#F2F2F2',
		        width: '100%',
		        height: document.body.clientHeight - 300 + 'px'
		      },
		      styleObjectImg: {
		        backgroundImage: '',
		        backgroundRepeat: 'no-repeat',
		        backgroundPosition: '0px 0px',
		        cursor: 'auto',
		        width: '100%',
		        height: '100%',
		        transform: 'rotate(0deg)',
		        transformOrigin: 'center',
		        position: 'absolute'
		      },
		      styleDetailImg: {
		        backgroundImage: '',
		        backgroundRepeat: 'no-repeat',
		        backgroundPosition: 'center',
		        backgroundSize: '100% 100%',
		        backgroundColor: 'white',
		        zIndex: '20',
		        cursor: 'auto',
		        width: '0px',
		        height: '150px',
		        transform: 'rotate(0deg)',
		        transformOrigin: 'center',
		        position: 'absolute',
		        bottom: 0,
		        left: 0,
		        border: '1px solid black'
		      },
    		}
    	},
    	methods: {
    		//获取背景图片
    	    downloadByBlob (url) {
		      const vm = this
		      const image = new Image()
		      image.src = url
		      image.onload = () => {
		        vm.imgWidth = image.width
		        vm.imgHeight = image.height
		        // 图片包裹元素宽度
		        this.imgWrapperWidth = this.$refs.imgWrapper.offsetWidth
		        this.imgWrapperHeight = this.$refs.imgWrapper.offsetHeight
		        this.showImgWidth = this.$refs.showImg.offsetWidth
		        this.showImgHeight = this.$refs.showImg.offsetHeight
		        this.ratio = 150 / this.imgWrapperHeight
		        this.imgDetailWidth = 150 * vm.imgWidth / vm.imgHeight
		        this.imgShowHeight = this.imgWrapperHeight * 150 / this.imgHeight
		        this.imgShowWidth = this.imgWrapperWidth * this.imgDetailWidth / this.imgWidth
		        this.styleDetailImg.width = this.imgDetailWidth + 'px'
		        // const imgWrapper = vm.$refs.imgWrapper
		
		        if (image.height > vm.screenHeight) {
		          vm.computedHeight = vm.screenHeight - 200
		        } else if (image.height > 670) {
		          vm.computedHeight = image.height
		        } else {
		          vm.computedHeight = 670
		        }
				//图片
		        vm.styleObjectImg.backgroundImage = 'url(' + url + ')'
		        //图片缩略图
		        vm.styleDetailImg.backgroundImage = 'url(' + url + ')'
		        vm.styleObjectImg.transform = 'rotate(0deg)'
		        // vm.styleObjectImg.width = vm.computedWidth + 'px'
		        vm.styleObjectImg.height = vm.computedHeight + 'px'
		        vm.styleObjectImg.left = '0px'
		        vm.styleObjectImg.top = '0px'
		
		        vm.styleObjectWrapper.height = vm.computedHeight + 'px'
		        vm.styleLeftDev.height = vm.computedHeight + 'px'
		
		      }
		    },
		    onMouseDown () {
	          this.onMouseDownFlag = true
		    },
		    onMouseDownImg () {
	          this.onMouseDownImgFlag = true
		    },
		    onMouseUp (event) {
	          this.onMouseDownFlag = false
		    },
		    onMouseUpImg (event) {
	          this.onMouseDownImgFlag = false
		    },
		    onMouseOver () {},
		    onMouseOverImg () {},
		    onMouseOut () {
	          this.onMouseOverFlag = false
	          this.onMouseDownFlag = false
		    },
		    onMouseOutImg () {
	          this.onMouseOverImgFlag = false
	          this.onMouseDownImgFlag = false
		    },
		    //图片移动
		    onMouseMove (e) {
		      if (this.onMouseDownFlag) {
		        const e = e || window.event
		        if (this.styleObjectImg.backgroundPosition) {
		          var rotate =
	                  parseInt(this.styleObjectImg.transform.split('(')[1]) % 360
		          if (rotate < 0) {
		            rotate += 360
		          }
		          let x = 0
		          let y = 0
		
		          if (rotate % 360 === 0) {
		            x =
                    parseInt(this.styleObjectImg.backgroundPosition.split(' ')[0]) +
                    e.movementX
		            y =
                    parseInt(this.styleObjectImg.backgroundPosition.split(' ')[1]) +
                    e.movementY
		          } else if (rotate % 270 === 0) {
		            x =
                      parseInt(this.styleObjectImg.backgroundPosition.split(' ')[0]) -
                      e.movementY
		            y =
	                   parseInt(this.styleObjectImg.backgroundPosition.split(' ')[1]) +
	                    e.movementX
		          } else if (rotate % 180 === 0) {
		            x =
                      parseInt(this.styleObjectImg.backgroundPosition.split(' ')[0]) -
                      e.movementX
		            y =
                      parseInt(this.styleObjectImg.backgroundPosition.split(' ')[1]) -
                      e.movementY
		          } else if (rotate % 90 === 0) {
		            x =
                      parseInt(this.styleObjectImg.backgroundPosition.split(' ')[0]) +
                      e.movementY
		            y =
                      parseInt(this.styleObjectImg.backgroundPosition.split(' ')[1]) -
                      e.movementX
		          }
		
		          this.positionX = x
		          this.positionY = y
				  //图片移动
		          this.styleObjectImg.backgroundPosition = x + 'px ' + y + 'px'
		          //视图缩略图移动
		          this.$refs.showImg.style.left = 0 - this.positionX * this.ratio - this.imgShowWidth / 2 + 'px'
		          this.$refs.showImg.style.top = 0 - this.positionY * this.ratio - this.imgShowHeight / 2 + 'px'
		          if (parseInt(this.$refs.showImg.style.left) < 0) {
		            this.$refs.showImg.style.left = 0 + 'px'
		          }
		          if (parseInt(this.$refs.showImg.style.top) < 0) {
		            this.$refs.showImg.style.top = 0 + 'px'
		          }
		        } else {
		          this.styleObjectImg.backgroundPosition = (this.computedWidth - this.imgWidth) / 2 + 'px ' + (this.computedHeight - this.imgHeight) / 2 + 'px'
		        }
		      }
		    },
		    //视图缩略图移动
		    onMouseMoveShowImg (e) {
		      if (this.onMouseDownImgFlag) {
		        const event = e || window.event
		        var rotate = parseInt(this.styleDetailImg.transform.split('(')[1]) % 360
		        if (rotate < 0) {
		          rotate += 360
		        }
		        let x = 0
		        let y = 0
		
		        if (rotate % 360 === 0) {
		          x =
                    parseInt(this.$refs.showImg.style.left) +
                    event.movementX
		          y =
                    parseInt(this.$refs.showImg.style.top) +
                    event.movementY
		        } else if (rotate % 270 === 0) {
		          x =
                    parseInt(this.$refs.showImg.style.left) -
                    event.movementY
		          y =
                    parseInt(this.$refs.showImg.style.top) +
                    event.movementX
		        } else if (rotate % 180 === 0) {
		          x =
                    parseInt(this.$refs.showImg.style.left) -
                    event.movementX
		          y =
                    parseInt(this.$refs.showImg.style.top) -
                    event.movementY
		        } else if (rotate % 90 === 0) {
		          x =
                    parseInt(this.$refs.showImg.style.left) +
                    event.movementY
		          y =
                    parseInt(this.$refs.showImg.style.top) -
                    event.movementX
		        }
		        this.positionDetailX = x
		        this.positionDetailY = y
		        this.positionX = (0 - x - this.imgShowWidth / 2) / this.ratio
		        this.positionY = (0 - y - this.imgShowHeight / 2) / this.ratio
		        //视图缩略图移动
		        this.$refs.showImg.style.left = this.positionDetailX + 'px'
		        this.$refs.showImg.style.top = this.positionDetailY + 'px'
		        //图片移动
		        this.styleObjectImg.backgroundPosition = (0 - this.positionDetailX - this.imgShowWidth / 2) / this.ratio + 'px ' + (0 - this.positionDetailY - this.imgShowHeight / 2) / this.ratio + 'px'
		      }
		    },
		    onDragStart () {
		      return false
		    },
		    onDragStartImg () {
		      return false
		    },
    	  }
	}
</script>

注意调用downloadByBlob方法，url为图片url
是文静的
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
拖拽图片的文本框
07-24
聊天输入框可拖拽图片，提供给前端要做聊天室的同学，便于发送图片消息
JavaScript 练手小技巧：拖拽事件、把图片拖拽入页面
九天翔龙的技术博客
01-30 2945
HTML5 新增了拖拽事件 drag，利用它可以实现把外部文件拖拽入页面中，可以实现文件的读取，上传等等功能。
Android 图片移动和拖动
xzizbb的博客
05-31 2822
Android 图片移动和拖动移动图片实现方式：利用点击两个按钮（left和right）来操纵图片向左向右的移动。界面要使得图片可以移动，要使用“RelativeLayout” activity_main: 将图片文件储存到drawable文件夹中，该示例命名为image1 <Button android:id="@+id/btnRight" android:layout_wi
js实现图片拖拽
weixin_46508703的博客
09-23 3461
<style> div{ position: relative; width: 150px; height: 150px; background-image: url(./images/img.jpg); background-size: 100%; } </style> <body> <div id="pop" ></div> <script> var pop = document.getElemen
js实现图片的拖动
sh2001824的博客
07-19 3474
js实现图片拖拽
图片拖拽移动
lx13717978508的博客
05-19 942
js 图片拖拽与缩放
jQuery拖拽图片上传表单代码
07-24
jQuery拖拽图片上传表单代码是一款jQuery基于layui制作图片上传和名称表单验证代码。
jQuery图片拖拽交换位置插件.zip
04-20
jQuery图片拖拽交换位置插件
qml 拖拽图片
06-11
本文件是通过QML实现的自由拖拽一个区域的图片的功能，需要的盆友可以自己下载，也可以参考我的博客。
手写原生代码专题 | 图片拖拽效果（一）
前端达人
05-30 527
一、系列介绍前端的小伙伴们，我想大多数都是颜值控吧，看到一个漂亮或新奇的效果，都想搞明白是怎么实现的吧。但是前端发展的实在太快，各种框架和组件五花八门，由于项目业务时间的问题，我们都习惯了...
javascript拖拽图片到指定位置
08-14
javascript拖拽图片到指定位置 。。。。。。。。。。。。。。。。。。。
图片拖拽任意拖拽
04-12
图片拖拽，可以再也没任意拖拽，可以获取图片左边实习
android实现拖拽图片的操作
04-18
这个工程是Observable与Observer的经典运用,是android实现拖拽图片的操作
JS实现图片拖拽排序（亲测可用）
03-07
前端用于鼠标拖拽排序，亲测可用，如果需要动态加载数据，请设置延迟加载
让你的图片实现可以拖动的效果
09-13
可以让你的图片在页面上随便拖到 <style> <!--.drag{position:relative;cursor:hand} --> </style> <script language="JavaScript"> var dragapproved=false var z,x,y function move(){ if (event.button==1&&dragapproved){ z.style.pixelLeft=temp1+event.clientX-x z.style.pixelTop=temp2+event.clientY-y return false }} function drags(){ if (!document.all) return if (event.srcElement.className=="drag"){ dragapproved=true z=event.srcElement temp1=z.style.pixelLeft temp2=z.style.pixelTop x=event.clientX y=event.clientY document.onmousemove=move }} document.onmousedown=drags document.onmouseup=new Function("dragapproved=false") </script> <img src="img/draw.jpg" class="drag">
js实现拖拽图片
混世小妲己
05-08 3372
js图片拖拽
元素计算距离与event事件对象
weixin_45393020的博客
04-22 560
元素计算距离与event事件对象 元素 1. offsetLeft/offsetTop 当前元素相对于父元素左边/上边的偏移量。只读属性，父元素不能是static。当前元素如果是fixed定位，返回的是元素与可是窗口的距离。 2. style.left/style.top 当前元素相对于父元素左边/上边的偏移量。 注意 offsetLeft/offsetTop与style.left/style.top的区别： offset是只读属性，style.left是可读可写属性； offset返回值是Number类
HTML(实现图片位置的拖拽效果)
weixin_30693683的博客
11-27 1700
首先我们要把图片大小用代码写出来 <style> div{ width:80px; height: 80px; background: blue; position: absolute; } </style> 　　写出鼠标移动事件 <script> var box = ...
js实现图片拖拽 鼠标位置放大缩小
最新发布
06-10
要实现同时实现图片的拖拽和鼠标位置放大缩小，可以参考以下步骤： 1. 在 HTML 中插入一张图片，设置图片的宽度和高度，并将其放置在一个容器中。 2. 使用 CSS 设置容器的样式，将容器的宽度和高度设置为图片的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值