vue实现图片拖拽功能

本文实例为大家分享了vue实现图片拖拽功能的具体代码，供大家参考，具体内容如下

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;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现图片预览效果实例（放大、缩小、拖拽）

    Vue实现图片预览效果实例（放大、缩小、拖拽）

    前言 这张图是显示的图片放大的一个预览情况,这里是参考预览操作实现的一个背景为黑色的部分,上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大,代码是基于Ant Design Vue框架的基础上 这里先分解部分,后面有全部代码 1.需要有黑色背景用于预览背景: 这里的背景要占满整个屏幕(这里的一般是参考其他插件预览的样式进行模拟设计的),样式在后方代码内 2.展示图片并且把图片展示到背景板最中间. 3.最重要的下方的两部分: 滚轮放大缩小图片: bbimg() { let e = e ||

  • vue实现拖拽或点击上传图片

    vue实现拖拽或点击上传图片

    本文实例为大家分享了vue实现拖拽或点击上传图片的具体代码,供大家参考,具体内容如下 一.预览图 二.实现 点击上传思路:将input的type设置为"file"类型即可上传文件.隐藏该input框,同时点击按钮时,调取该input的点击上传功能.剩下的就是css优化页面了. 拖拽上传思路:通过给拖拽框dropbox绑定拖拽事件,当组件销毁时解绑事件.在拖拽结束,通过event.dataTransfer.files获取上传的文件信息.然后在对文件进行上传服务器操作. 接下来请允许我简单

  • 基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能

    用Vue2实现移动端图片上传.压缩.拖拽排序.拖拽删除功能 图片上传图片压缩拖拽排序.拖拽删除 之前在公司开发过一段时间的移动端H5页面,有个功能就是要上传图片+压缩.参考了一下网上的方法,外加自己摸索的过程,最终实现了这个功能.后面在家闲的时候又加多了个长按选中图片,并且可以拖拽排序.拖拽到指定位置删除的功能. github地址:代码地址 下面直接进入正题: 图片上传 图片上传用的是HTML的input标签实现的.核心就是把获取到的文件通过FileReader转换成图片,代码如下: <inpu

  • vue集成一个支持图片缩放拖拽的富文本编辑器

    vue集成一个支持图片缩放拖拽的富文本编辑器

    需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很难找到一个完美符合自己要求的编辑器.经过多次尝试,最终选择了wangEditor富文本编辑器. 最初使用的是vue2Editor富文本编辑器,vue2Editor本身是不支持图片拖拽的,但是提供了可配置图片拖拽的方法,需要借助Quill.js来实现图片拖拽.虽然满足了业务需求,但是在移动端展示的效果不是很理想. 此次编辑器主要是

  • 基于vue-simplemde实现图片拖拽、粘贴功能

    项目使用的是vue框架,需要一个markdown的编辑框,就在npm上找了一下,发现simplemde挺不错的,由于我比较懒,就顺便在npm又搜了一下,找到了vue-simplemde这个 package ,那就开始使用它吧. 但是这个 vue-simplemde 不支持图片拖拽上传.粘贴上传,也不能说是因为这个 vue-simplemde ,因为 vue-simplemde 只是对 simplemde 的基础上封装成一个Vue插件.所以最后还是由于 simplemde 没有提供相关的功能,但是

  • vue插件draggable实现拖拽移动图片顺序

    vue插件draggable实现拖拽移动图片顺序

    本文实例为大家分享了vue插件draggable实现拖拽移动图片顺序的具体方法,供大家参考,具体内容如下 例如图片显示的这种图片列表.商品展示需要拖动图片改变顺序,vuedraggable可以实现拖拽. 首先, npm i vuedraggable 然后在组件中引入, import draggable from 'vuedraggable'; 定义组件, components: { draggable, }, 标签中应用, <ul class="pic-list clearfix"

  • vue实现图片拖拽功能

    vue实现图片拖拽功能

    本文实例为大家分享了vue实现图片拖拽功能的具体代码,供大家参考,具体内容如下 1.主要涉及到的元素知识,示意图: 2.js代码部分: directives: { drag: { // 指令的定义 bind: function(el) { // 获取当前元素 let oDiv = el; oDiv.onmousedown = (e) => { // 算出鼠标相对元素的位置 let disX = e.clientX - oDiv.offsetLeft; let disY = e.clientY -

  • Vue自定义指令拖拽功能示例

    下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name="viewport" content="width=device-width, initial-scale=1

  • UGUI实现图片拖拽功能

    这一篇博客我们来使用UGUI实现图片的拖拽功能. 说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标.),这两个坐标是不一样的,所以拖拽是就需要转换.因为鼠标的移动是屏幕坐标,而 UI 的移动是ugui坐标.转换的方法: RectTransformUtility.ScreenPointToLocalPointInRectangle ( - );这个方法可以把屏幕坐标转换成 ugui 坐标.至于屏幕

  • 基于Vue 撸一个指令实现拖拽功能

    之前撸了一个copy 指令,这次再撸一个拖拽指令.. 具体是个什么蛇皮玩意儿呢,大概就像介样: emmm..没错,看起来就是如此的鸡肋,但是莫得办法,大佬喜欢啊. 由于我们项目中用的是 element-ui ,所有这个指令只针对 element-ui 的对话框组件哈,如果你们用的别的 ui 库也有这个需求的,涂涂改改应该也能用.. 其实这个拖拽的原理还是很简单的: 1.首先鼠标按下( onmousedown ) 记录目标元素当前的 left 和 top 值 2.鼠标移动( onmousemove

  • JS实现图片拖拽交换效果

    JS实现图片拖拽交换效果,供大家参考,具体内容如下 听 WEB前端javascript企业实战班 公开课,用JS实现了图片拖拽交换的目的:感谢老师的讲解. 实现要点 鼠标点击onmousedown:获取鼠标在页面上可视区域的位置(clientX, clientY)和元素外边框距已定位父元素容器的位置(offsetLeft,offsetTop): 鼠标移动onmousemove: 获取鼠标在页面上可视区域的位置(clientX, clientY),并实时改变目标元素位置:进行碰撞检测,同时计算被碰

  • Vue使用vue-draggable 插件在不同列表之间拖拽功能

    今天分享一个vue项目中在不同列表拖拽设置选项的功能,这个功能也是在做项目中遇到的,先说下这个功能的要点(参考下图),有2个列表,左侧列表展示已选,右侧列表展示未选,通过拖拽进行设置,已选的选项不能超过4个,超过的话自动将拖拽之前的最后一项清除到右侧,且如果从已选往未选里拖的时候,右侧显示垃圾桶的提示(如图). 拖拽功能图片: 垃圾桶显示图: 首先讲讲vue-draggable的使用 安装vue-draggable: npm install vuedraggable 在使用插件的组件内引入vue

  • vue实现滑块拖拽校验功能的全过程

    vue实现滑块拖拽校验功能的全过程

    效果图 定义骨架,写html和css html部分 <template> <div class="drag-wrapper" ref="dragDiv"> <div class="drag_bg"></div> <div class="drag_text f14">{{ confirmWords }}</div> <!-- 移动的模块 -->

  • vue中实现拖拽排序功能的详细教程

    vue中实现拖拽排序功能的详细教程

    目录 原生拖拽 API 实现拖拽 设置元素 dragable 拖放事件 拖拽排序 拖拽API + 防抖实现 vue awe-dnd 拖拽组件 安装 awe-dnd 组件库 在 main.js 中将 awe 挂载到全局 实现案例 项目中-- 拖拽的效果 不理想 vue-smooth-DnD 安装 smooth-dnd API: container smooth-dnd 生命周期 回调 事件 API: Draggable 效果实现 项目中实现 – 拖拽位置无法确定 vuedraggable 安装 引

  • WinForm实现的图片拖拽与缩放功能示例

    WinForm实现的图片拖拽与缩放功能示例

    本文实例讲述了WinForm实现的图片拖拽与缩放功能.分享给大家供大家参考,具体如下: 最近做项目的时候遇到上传施工平面布置图,查看,因为图片比较大,一般的显示器分辨率无法显示全,然后还需要放大看清楚图片里面的文字内容,所以需要用到图片的拖拽与缩放功能.这里整理下具体操作. 首先新建一个窗体,拖一个panel控件到窗体中,然后在拖一个pictureobx控件到panel中,然后在添加个上传图片的按钮: 具体代码: using System; using System.Collections.Ge

随机推荐