精华内容
下载资源
问答
  • 封装一个vue拖拽上传组件 Vue拖动选择器 (Vue-Drag-Selector) A simple vue drag selector component. 一个简单的Vue拖动选择器组件。 View demo 查看演示 View Github 查看Github 安装 (install) npm i vue-drag...

    封装一个vue拖拽上传组件

    Vue拖动选择器 (Vue-Drag-Selector)

    A simple vue drag selector component.

    一个简单的Vue拖动选择器组件。

    安装 (install)

    npm i vue-drag-selector

    进口 (import)

    // main.js
    import VueDragSelector from "vue-drag-selector";
    Vue.use(VueDragSelector);

    用法 (Usage)

    <template>
        <div>
            <drag-selector v-model="checkedList"
                           @change="handleDragSelectorChange" class="drag-selector">
                <drag-selector-item v-for="(item, index) in myDragList"
                                    :value="item"
                                    :key="index" class="drag-selector__item">
                    {{ item }}
                </drag-selector-item>
            </drag-selector>
            {{ checkedList }}
        </div>
    </template>
    
    <script>
      export default {
        name: "app",
        data() {
          return {
            checkedList: [],
            myDragList: [
              { a: 1, b: 5 },
              { a: 2, b: 6 },
              { a: 3, b: 7 }
            ]
          };
        },
        methods: {
          handleDragSelectorChange(checkedList) {
            console.log(checkedList);
          }
        }
      };
    </script>

    翻译自: https://vuejsexamples.com/a-simple-vue-drag-selector-component/

    封装一个vue拖拽上传组件

    展开全文
  • vue拖拽

    千次阅读 2018-07-18 23:29:44
    不是很顺畅,而且也是DOM操作,不是符合vue的意义,尽量不要改DOM元素,要用数据驱动,少用 this.$refs &lt;style&gt; #box { position: absolute; left: 0; top: 0; width: 100px; height: 100px; ...

    常规

    不是很顺畅,而且也是DOM操作,不是符合vue的意义,尽量不要改DOM元素,要用数据驱动,少用 this.$refs

    <style>
      #box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        background: red;
      }
    </style>
    
    <div id="app">
        <div id="box" ref="box" @mousedown="down"  @mousemove="move" @mouseup="up" :style="{left, top}"></div>
    </div>
    <script src="vue.js"></script>
    <script>
      let app = new Vue({
          el:'#app',
          data:function(){
          return{
              isDown: false,
              x:0,
              y:0,
              left:'',
              top:''
          }
      },
      methods:{
          down(e){
            this.isDown=true;
            this.x=e.clientX-this.$refs.box.offsetLeft;
            this.y=e.clientY-this.$refs.box.offsetTop;
          },
          move(e){
            if(this.isDown){
              // this.$refs.box.style.left=e.clientX-this.x+'px';
              // this.$refs.box.style.top=e.clientY-this.y+'px';
              //尽量少用Dom操作,可改为
              this.left=e.clientX-this.x+'px';
              this.top=e.clientY-this.y+'px';
            }
          },
          up(){
            this.isDown=false;
          }
      }
      })
    </script>

    自定义指令

    推荐使用: 指令作用到元素身上的时候被执行 测试地址:http://jsrun.net/HTgKp

    <div id="app">
        <div id="box1" v-drag.limit></div>
        <div id="box2" v-drag></div>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        /*
        * 创建自定义的指令
        * */
        Vue.directive('drag', {
            // 当指令绑定到元素上的时候执行
            bind(el, binding) {
                // console.log('bind');
                // 当前指令绑定的dom元素
                //console.log(el);
                // 指令传入的参数、修饰符、值  v-指令名称:参数.修饰符=值
                // console.log(binding)
    
                el.onmousedown = function(e) {
                    let disX = e.clientX - el.offsetLeft;
                    let disY = e.clientY - el.offsetTop;
                    document.onmousemove = function(e) {
    
                        let L = e.clientX - disX;
                        let T =  e.clientY - disY;
    
                        if (binding.modifiers.limit) {
                            if (L < 0) {
                                L = 0;
                            }
                        }
    
                        el.style.left = L + 'px';
                        el.style.top = T + 'px';
                    };
    
                    document.onmouseup = function() {
                        document.onmousemove = null;
                    };
    
                    return false;
                }
            }
        });
    
        new Vue({
            el: '#app'
        });
    </script>

    移动端

    <style>
    .box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        background: red;
    }
    </style>
    
    <div id="app">
        <div  class="box" ref="box" 
          @mousedown="down"  @touchstart="down" 
          @mousemove="move"  @touchmove="move"  
          @mouseup="end"  @touchend="end"
        >
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
    let app = new Vue({
        el:'#app',
        data() {
            return {
            flags: false,
            position: {
                x: 0,
                y: 0
            },
            nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
            }
        },
        methods: {
            down(){
            this.flags = true;
            var touch ;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            this.position.x = touch.clientX;
            this.position.y = touch.clientY;
            this.dx = this.$refs.box.offsetLeft;
            this.dy = this.$refs.box.offsetTop;
            },
            move(){
            if(this.flags){
                var touch ;
                if(event.touches){
                    touch = event.touches[0];
                }else {
                    touch = event;
                }
                this.nx = touch.clientX - this.position.x;
                this.ny = touch.clientY - this.position.y;
                this.xPum = this.dx+this.nx;
                this.yPum = this.dy+this.ny;
                this.$refs.box.style.left = this.xPum+"px";
                this.$refs.box.style.top = this.yPum +"px";
                //阻止页面的滑动默认事件
                document.addEventListener("touchmove",function(){
                    event.preventDefault();
                },false);
            }
            },
        //鼠标释放时候的函数
            end(){
            this.flags = false;
            },
        }
    })
    </script>
    展开全文
  • Vue 拖拽组件源码

    2018-10-25 10:32:25
    Vue 拖拽组件源码
  • vue 拖拽指令 v拖曳 (v-dragged) Vue 2.x directive plugin for drag event detection. Vue 2.x指令插件,用于拖动事件检测。 View demo 查看演示 Download Source 下载源 安装 (Install) npm install --save v-...

    vue 拖拽指令

    v拖曳 (v-dragged)

    Vue 2.x directive plugin for drag event detection.

    Vue 2.x指令插件,用于拖动事件检测。

    安装 (Install)

    npm install --save v-dragged
    import Vue from 'vue'
    import VDragged from 'v-dragged'
    
    Vue.use(VDragged)

    (Example)

    <div v-dragged="onDragged"></div>
    {
      // ...other options omitted
    
      methods: {
        onDragged({ el, deltaX, deltaY, offsetX, offsetY, clientX, clientY, first, last }) {
          if (first) {
            this.dragged = true
            return
          }
          if (last) {
            this.dragged = false
            return
          }
          var l = +window.getComputedStyle(el)['left'].slice(0, -2) || 0
          var t = +window.getComputedStyle(el)['top'].slice(0, -2) || 0
          el.style.left = l + deltaX + 'px'
          el.style.top = t + deltaY + 'px'
        }
      }
    }

    活动详情 (Event Details)

    The argument passed to the callback function is an object containing the following properties:

    传递给回调函数的参数是一个包含以下属性的对象:

    埃尔 (el)

    • The target element on which the diretive binds.

      定向绑定的目标元素。

    • type: HTMLElement

      类型:HTMLElement

    第一 (first)

    • A boolean to indicate whether it is the first move of the drag. (drag starts here).

      一个布尔值,指示它是否为拖动的第一步。 (从此处开始拖动)。

    • type: Boolean

      类型:布尔型

    持续 (last)

    • A boolean to indicate whether it is the last move of the drag. (drag ends here).

      一个布尔值,指示是否为拖动的最后一步。 (拖动到此结束)。

    • type: Boolean

      类型:布尔型

    三角洲 (deltaX)

    • The change of the pointer (mouse/touch)'s x coordination from the last position. undefined when first or last is true.

      指针(鼠标/触摸)的x坐标从最后一个位置开始的变化。 当firstlasttrueundefined

    • type: Number

      类型:数字

    三角洲 (deltaY)

    • The change of the pointer (mouse/touch)'s y coordination from the last position. undefined when first or last is true.

      指针(鼠标/触摸)的y坐标从最后一个位置开始的变化。 当firstlasttrueundefined

    • type: Number

      类型:数字

    偏移量 (offsetX)

    • The change of the pointer (mouse/touch)'s x coordination from the starting position. undefined when first or last is true.

      指针(鼠标/触摸)的x坐标从起始位置开始的变化 。 当firstlasttrueundefined

    • type: Number

      类型:数字

    偏移量 (offsetY)

    • The change of the pointer (mouse/touch)'s y coordination from the starting position. undefined when first or last is true.

      指针(鼠标/触摸)的y坐标从起始位置开始的变化 。 当firstlasttrueundefined

    • type: Number

      类型:数字

    客户X (clientX)

    • Current x coordination of the pointer (mouse/touch).

      指针的当前x坐标(鼠标/触摸)。

    • type: Number

      类型:数字

    客户 (clientY)

    • Current y coordination of the pointer (mouse/touch).

      指针的当前y坐标(鼠标/触摸)。

    • type: Number

      类型:数字

    修饰符 (Modifier)

    防止 (prevent)

    • prevent default on pointer events (touchstart, touchmove, touchend, mousedown, mousemove, mouseup).

      防止默认发生指针事件(touchstart,touchmove,touchend,mousedown,mousemove,mouseup)。

    <div v-dragged.prevent="onDragged"></div>

    翻译自: https://vuejsexamples.com/vue-directive-plugin-for-drag-event-detection/

    vue 拖拽指令

    展开全文
  • 主要为大家详细介绍了vue拖拽组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue拖拽组件

    2019-02-19 09:33:00
    Vue拖拽组件 vue开发公众号项目,***产品需要添加一个新的功能。拖拽功能。一听简单。百度上轮子挺多,直接拉一个过来用着就行。然鹅。。。兴奋之余,却失望至极。东西很多,没有一个能使得。...

    Vue拖拽组件

    vue开发公众号项目,***产品需要添加一个新的功能。拖拽功能。一听简单。百度上轮子挺多,直接拉一个过来用着就行。然鹅。。。兴奋之余,却失望至极。东西很多,没有一个能使得。你让我失望,那我就让你绝望。于是,拖拽的故事就开始了。。

    vue拖拽功能

    必备知识点:

    先给不懂的童鞋补充下流程,文章要细读方能拖动元素到你心里~

    按下的时候,我们需要获取

    元素当前的 具有相对定位元素的左侧距离

    元素当前的具有相对定位元素的顶部距离

    鼠标按下点的x轴距离(鼠标左侧的距离)

    鼠标按下点的y轴距离 (鼠标顶部的距离)

    获取到这些点,先存储起来,后面的计算需要用到这些值

      start(e){
          // 如果touches存在就说明是移动端
          // 否则为pc端直接获取事件源对象
          let touch = e.touches? e.touches[0] : e;
          this.position.x = touch.clientX;
          this.position.y = touch.clientY;
          this.dx = moveDiv.offsetLeft;
          this.dy = moveDiv.offsetTop;
      }

    Step1.

    让元素跟着鼠标的移动不断移动。既然鼠标的x轴和y轴可以获取到,那我们就可以通过计算来让元素实现移动。

    移动的时候,我们需要获取并设置

    鼠标此时的当前的x轴和y轴的距离

    鼠标点击的x轴和y轴的距离(按下的时候定义过)

    此时用移动的距离 - 点击的起始位置就是移动的距离。

    赋值给点击元素的left和top即可。

    补充:计算的方式很多种,这知识其中一种

      move(e){
          let touch = e.touches? e.touches[0] : e;
          this.nx = touch.clientX - this.position.x;
          this.ny = touch.clientY - this.position.y;
          this.xPum = this.dx+this.nx;
          this.yPum = this.dy+this.ny;
          moveDiv.style.left = this.xPum + "px";
          moveDiv.style.top = this.yPum + "px";
      },

    Step2.

    离开的时候,我们需要抬起和移动事件从栈中清除掉,并且在结束时对边界做一个处理。不让元素拖动到屏幕外面,否则的话,不小心拖出去了,拉都拉不回来。这就很尴尬了。

    元素的宽度

    父元素的宽度和高度

    元素的左侧距离 + 元素的宽度

    元素的顶部距离 + 元素的高度

    end(e){
          let oWidth = moveDiv.offsetWidth; // Element Width
          let oWrapWidth = moveDiv.parentNode.offsetWidth; // Parent Element Width
          let oWrprapHeight = moveDiv.parentNode.offsetHeight; // Parent Element Height
          let sumWidth = moveDiv.offsetLeft + oWidth; // Element Left + Element Width
          let sumHeight = moveDiv.offsetTop + moveDiv.offsetHeight; // Element Top + Element Height
          // The Limit Deal
          if(moveDiv.offsetLeft < 0) {
              moveDiv.style.left = 0;
          } else if(sumWidth > oWrapWidth){
              moveDiv.style.left = oWrapWidth - oWidth + 'px';
          } else if(moveDiv.offsetTop < 0) {
              moveDiv.style.top = 0;
          } else if(sumHeight > oWrprapHeight) {
              moveDiv.style.top = oWrprapHeight - moveDiv.offsetHeight + 'px';
          }
          document.onmousemove = null;
          document.onmouseup = null;
      }

    组件源码

    考虑到复用性,pc和移动端。

    <template>
      <!--S 拖动组件 -->
        <div class="drag" id="moveDiv"
            @mousedown="start($event)" @touchstart="start($event)"
            @mousemove="move($event)" @touchmove="move($event)"
            @mouseup="end($event)" @touchend="end($event)">
            <slot name="drag-cont"></slot>
        </div><!--E 拖动组件 -->
      </template>
      <script>
      export default {
        data() {
          return {
            position: {x: 0,y: 0}, // 鼠标点击的x轴和y轴的距离
            nx: '',    // 鼠标当前距离元素的左侧距离
            ny: '',    // 鼠标当前距离元素的顶部距离
            dx: '',    // 元素距离左侧的距离
            dy: '',    // 元素距离顶部的距离
            xPum: '',  // 元素移动的x轴距离
            yPum: '',  // 元素移动的y轴距离
          }
        },
        methods: {
          start(e){
            // 如果touches存在就说明是移动端
            // 否则为pc端直接获取事件源对象
            let touch = e.touches? e.touches[0] : e;
            this.position.x = touch.clientX;
            this.position.y = touch.clientY;
            this.dx = moveDiv.offsetLeft;
            this.dy = moveDiv.offsetTop;
          },
          move(e){
            let touch = e.touches? e.touches[0] : e;
            this.nx = touch.clientX - this.position.x;
            this.ny = touch.clientY - this.position.y;
            this.xPum = this.dx+this.nx;
            this.yPum = this.dy+this.ny;
            moveDiv.style.left = this.xPum + "px";
            moveDiv.style.top = this.yPum + "px";
            document.addEventListener("touchmove",function(){
                event.preventDefault();
            },false);
            if(e.preventDefault){
              e.preventDefault();
              }else{
              window.event.returnValue == false;
            }
          },
          end(e){
            let oWidth = moveDiv.offsetWidth; // Element Width
            let oWrapWidth = moveDiv.parentNode.offsetWidth; // Parent Element Width
            let oWrprapHeight = moveDiv.parentNode.offsetHeight; // Parent Element Height
            let sumWidth = moveDiv.offsetLeft + oWidth; // Element Left + Element Width
            let sumHeight = moveDiv.offsetTop + moveDiv.offsetHeight; // Element Top + Element Height
            // The Limit Deal
            if(moveDiv.offsetLeft < 0) {
              moveDiv.style.left = 0;
            } else if(sumWidth > oWrapWidth){
              moveDiv.style.left = oWrapWidth - oWidth + 'px';
            } else if(moveDiv.offsetTop < 0) {
              moveDiv.style.top = 0;
            } else if(sumHeight > oWrprapHeight) {
              moveDiv.style.top = oWrprapHeight - moveDiv.offsetHeight + 'px';
            }
            document.onmousemove = null;
            document.onmouseup = null;
          }
        }
      }
      </script>
    <style lang="less" scoped>
      .drag {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 999;
      }
      </style>

     

    引入Demo

        
     <Drag class="drag">
            <div slot="drag-cont">订单记录</div>
          </Drag>
      <style>
        .drag {
          width: .6rem;
          height: .6rem;
          background-color: rgba(0, 0, 0,.55);
          text-align: center;
          line-height: .6rem;
          font-size: .14rem;
          color: #ffffff;
        }
      </style>

    使用的时候,给组件添加类名,添加样式即可。

    posted @ 2019-02-19 09:33 狗尾草的博客 阅读( ...) 评论( ...) 编辑 收藏
    展开全文
  • 本文重点给大家介绍Vue拖拽组件开发实例,拖拽的原理是手指在移动的过程中,实时改变元素的位置即top和left值,使元素随着手指的移动而移动。对实例代码感兴趣的朋友跟随脚本之家小编一起学习吧
  • Vue 拖拽组件 vuedraggable 和 vue-dragging 参考网址:http://www.ptbird.cn/vue-draggable-dragging.html、http://www.itxst.com/vue-draggable/tutorial.html 使用过程: 安装:npm i -S vuedraggable 引入...
  • vue拖动滚动条与拖拽冲突 Vue拖动滚动 (vue-dragscroll) vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" style). vue-...
  • vue 拖拽功能

    2020-03-31 09:41:06
    vue 拖拽功能 html <div id="app" @mousedown="move"> {{positionX}} {{positionY}} </div> data数据声明 在这里插入代码片 data () { return { positionX: 0, positionY: 0, } }, js部...
  • vue拖拽案例

    千次阅读 2018-08-22 23:04:47
    本案例基于vue自定义指令和原生js的写法实现的。 &lt;!DOCTYPE html&gt; &lt;html&...vue拖拽&lt;/title&gt; &lt;script src="https://cdn.jsdelivr.net/npm
  • Vue拖拽组件开发实例.pdf
  • 主要为大家详细介绍了vue拖拽排序插件vuedraggable的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序克隆clone,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue拖拽介绍

    2019-06-12 10:19:23
    vue拖拽介绍 基本使用方法同HTML5 w3school 方法介绍 draggable 为了使元素可拖动,设置draggable=“true” 默认情况下,图像、链接和被选中的文本是可以拖动的,因为它们的draggable自动设置为true 应用于被拖动...
  • Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作。 一、安装 npm i -S ...
  • 主要介绍了Vue拖拽组件列表实现动态页面配置功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue拖拽图片认证

    2020-07-28 18:41:53
    vue 拖拽图片验证 手机端效果 做了两套事件,没有放到一块做兼容, 拖拽认证 做了两套事件,没有放到一块做兼容, 有空做兼容 @mousedown=“sliderDown” @touchstart=“touchStartEvent” @touchmove=...
  • Vue拖拽组件awe-dnd

    千次阅读 2020-05-06 15:41:53
    Vue拖拽组件awe-dnd安装依赖在main.js中注册在页面drag.vue中运用效果图 安装依赖 npm install awe-dnd --save 安装相关文章:npm 安装指定版本(按版本安装) 在main.js中注册 import VueDND from 'awe-dnd'; // ...
  • vue拖拽排序

    2019-06-24 11:35:23
    awe-dnd一款可任意拖动排序的vue插件。支持桌面和移动端,拖拽过渡动画美观。支持vue1和vue2版本。 安装: npm install awe-dnd --save 引入: import VueDND from 'awe-dnd' Vue.use(VueDND) 页面内容: ...
  • 简介:vue拖拽移动操作,比如A文件拖拽移动至B文件夹中,如何检测拖拽到的是B文件夹,draggable插件就可以解决,用法如下: 一:安装 npm install vuedraggable 二:引入 import draggable from "vuedraggable...
  • vue拖拽克隆clone组件API, vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档) 效果图: 首先需要安装vuedraggable依赖包: npm install vuedraggable --save 因为拖拽组件依赖sortablejs ,如果...
  • vue拖动滚动条与拖拽冲突I've received dozens of emails about my Six Degrees of Kevin Bacon Using MooTools article. The MooTools in my article contained a lot of conditional code to require correct ...
  • vue拖拽元素中的图片或文字拖拽失灵 最简单的方法: 将图片设置为背景图片 文字使用templae包裹(可用v-if控制显隐)
  • Vue拖动选择器 基于Vue.js的框选组件 示例(演示) 安装(install) npm i vue-drag-selector ♡(进口) // main.js import VueDragSelector from "vue-drag-selector"; Vue.use(VueDragSelector); 用法(用法) ...
  • vue拖拽组件生成代码布局 VuePress (VuePress) Minimalistic docs generator with Vue component based layout system. 具有基于Vue组件的布局系统的简约文档生成器。 Minimalistic Vue-powered static site ...
  • 封装一个vue拖拽上传组件 vue-rokka-uploader (vue-rokka-uploader) Vue component to upload images to rokka.io. Vue组件可将图像上传到rokka.io。 View Demo 查看演示 View Github 查看Github 安装 ...
  • vue 拖拽事件

    万次阅读 2018-02-12 11:58:58
    一、vue使用draggable实现拖拽效果,可参考https://github.com/SortableJS/Vue.Draggable二、使用h5的原生drag事件这两种方式各有各的长处,draggable实现的拖拽效果一般要求数据格式相同,其实质就是数据的添加和...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,845
精华内容 7,138
关键字:

vue拖动

vue 订阅