简单实现  没有做兼容
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="box">

     <drag></drag>

</div>

<template id="drag">

      <div :style="json" @mousedown="move($event)"></div>

</template>

    <script src="lib/bower_components/vue/dist/vue.js"></script>

    <script>

         new Vue({

             el:"#box",  //Vue对象作用的范围

             components:{

              'drag':{  //drag标签

                data:function(){

                     return {

                           json:{width:"100px",height:"100px",

                          background:"red",position:"absolute"

                       }

                     }

                },

                methods:{

                   move:function(el){

                       var obj=this.$el;

                       var disX=el.clientX-obj.offsetLeft;

                       var disY=el.clientY-obj.offsetTop;

                       document.onmousemove=function(el){

                        var left=el.clientX-disX;

                        var top=el.clientY-disY;

                        obj.style.left=left+"px";

                        obj.style.top=top+"px";

                           document.onmouseup=function(){

                          document.onmousemove=null;

                          document.onmouseup=null;

                           }

                           return false;

                       }

                       return false;

                   }

                },

                  template:"#drag"

              }

           } 

         });

    </script>

</body>

</html>

用vue的自定义组件写了一个拖拽 组件,局部的 只能在自定义元素内的的更多相关文章

  1. 开源自己写的一个拖拽库，兼容到IE8+

    github地址:https://github.com/qiangzi7723/draggable 目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试.库里面写了很多的注释,对于想 ...

  2. vue拖拽组件开发

    vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...

  3. Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示

    本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...

  4. vue组件实现图片的拖拽和缩放

    vue实现一个组件其实很简单但是要写出一个好的可复用的组件那就需要多学习和钻研一下,一个好的组件必须有其必不可少的有优点:一是能提高应用开发效率.测试性.复用性等:二是组件应该是高内聚.低耦合的:三是 ...

  5. Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

    Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...

  6. 在 Element-UI 的 Table 组件上添加列拖拽效果

    Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...

  7. Qt之股票组件-自选股--列表可以拖拽、右键常用菜单

    目录 一.开头嘴一嘴 二.效果展示 三.自选股列表 1.列表初始化 2.添加Item 3.右键菜单 4.拖拽Item 5.刷新数据 四.相关文章 原文链接:Qt之股票组件-自选股--列表可以拖拽.右键 ...

  8. React拖拽组件Dragact V0.1.7：教你优化React组件性能与手感

    仓库地址:Dragact手感丝滑的拖拽布局组件 预览地址:支持手机端噢- 上回我们说到,Dragact组件已经进行了一系列的性能优化,然而面对大量数据的时候,依旧比较吃力,让我们来看看,优化之前的Dr ...

  9. 强大的拖拽组件：React DnD 的使用

    强大的拖拽组件:React DnD 的使用 react.js 10.6k 次阅读  ·  读完需要 25 分钟 17 文章首发我的个人blog : 原文链接 学习 React DnD 的最初原因是阅读 ...

随机推荐

  1. Project Euler Problem7

    10001st prime Problem 7 By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13, we can see t ...

  2. 程序打jar包

    打包的时候,平常选择第二个选项 jar包中的内容为: 一般运行没有问题. 在部分情况,使用quartz时,在eclipse中不报错,使用第二种方式打包,运行会报错. 选择第一种打包方式,就不会报错了( ...

  3. Java中日期格式化SimpleDateFormat类包含时区的处理方法

    1.前言 需要把格式为“2017-02-23T08:04:02+01:00”转化成”23-02-2017-T15:04:02“格式(中国时区为+08:00所以是15点),通过网上查找答案,发现没有我需 ...

  4. ThinkPHP 3.1.3及之前的版本使用不当可造成SQLi

    Lib/Core/Model.class.php中解析SQL语句的函数parseSql没有对SQL语句进行过滤,使用不当可导致SQL注入.(哈哈,其实用再安全的框架使用不当都可能造成SQLi) 函数: ...

  5. php 中使用include、require、include_once、require_once的区别

    在PHP中,我们经常会通过include.require.include_once.require_once来引用文件,都可以达到引用文件的目的,但他们之间又有哪些区别呢,接一下我们详细的介绍一下 i ...

  6. python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  7. Spring整合Quartz实现动态定时器，相关api，定时器添加，删除，修改

    一.版本说明 spring3.1以下的版本必须使用quartz1.x系列,3.1以上的版本才支持quartz 2.x,不然会出错. 原因:spring对于quartz的支持实现,org.springf ...

  8. java：冒泡排序、选择排序、插入排序实现

    整数排序 给一组整数,按照升序排序,使用选择排序,冒泡排序,插入排序或者任何 O(n2) 的排序算法. 样例 样例 1: 输入: [3, 2, 1, 4, 5] 输出: [1, 2, 3, 4, 5] ...

  9. python学习之python安装

    1.下载python源码包 wget https://www.python.org/ftp/python/3.5.5/Python-3.5.5.tar.xz 2.下载  xz yum -y insta ...

  10. python全栈开发day12-函数的有用信息、带参数的装饰器、多个装饰器装饰一个函数、global和nonlocal的进一步解析和总结

    1.上周回顾 1).函数名的应用 直接打印函数名,是函数的地址 变量 函数的参数 函数的返回值 可以当容器类数据类型的元素 2).闭包 内层函数对外层函数的非全局变量的引用,就是闭包. 并返回内部函数 ...