用vue的自定义组件写了一个拖拽 组件,局部的 只能在自定义元素内的
简单实现 没有做兼容
<!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的自定义组件写了一个拖拽 组件,局部的 只能在自定义元素内的的更多相关文章
- 开源自己写的一个拖拽库，兼容到IE8+
github地址:https://github.com/qiangzi7723/draggable 目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试.库里面写了很多的注释,对于想 ...
- vue拖拽组件开发
vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...
- Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示
本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...
- vue组件实现图片的拖拽和缩放
vue实现一个组件其实很简单但是要写出一个好的可复用的组件那就需要多学习和钻研一下,一个好的组件必须有其必不可少的有优点:一是能提高应用开发效率.测试性.复用性等:二是组件应该是高内聚.低耦合的:三是 ...
- Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...
- 在 Element-UI 的 Table 组件上添加列拖拽效果
Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...
- Qt之股票组件-自选股--列表可以拖拽、右键常用菜单
目录 一.开头嘴一嘴 二.效果展示 三.自选股列表 1.列表初始化 2.添加Item 3.右键菜单 4.拖拽Item 5.刷新数据 四.相关文章 原文链接:Qt之股票组件-自选股--列表可以拖拽.右键 ...
- React拖拽组件Dragact V0.1.7：教你优化React组件性能与手感
仓库地址:Dragact手感丝滑的拖拽布局组件 预览地址:支持手机端噢- 上回我们说到,Dragact组件已经进行了一系列的性能优化,然而面对大量数据的时候,依旧比较吃力,让我们来看看,优化之前的Dr ...
- 强大的拖拽组件：React DnD 的使用
强大的拖拽组件:React DnD 的使用 react.js 10.6k 次阅读 · 读完需要 25 分钟 17 文章首发我的个人blog : 原文链接 学习 React DnD 的最初原因是阅读 ...
随机推荐
- KVM -> 虚拟机管理&console登录_02
1.KVM虚拟机管理操作 virsh命令常用参数总结 1.开机关机: virsh list (只可以查看运行的虚拟机) virsh list --all (全部都可以查看) 开机与关机: virsh ...
- Ex 6_18 硬币有限的兑换问题_第七次作业
子问题定义: 定义一个二维数组b,其中b[i][j]表示前i个币种是否能兑换价格j,表示第i个币种的面值,第i个币种的使用有两种情况,若使用,则b[i][j]=b[i-1][j-],若不使用,则b[i ...
- 在Android开发中，定时执行任务的3种实现方法
在Android开发中,定时执行任务的3种实现方法: 一.采用Handler与线程的sleep(long)方法(不建议使用,Java的实现方式)二.采用Handler的postDelayed(Runn ...
- IntelliJ IDEA使用教程
注:本文来源:李学凯 的<IntelliJ IDEA使用教程 (总目录篇)> 一:(总目录篇)_1:硬件要求 IntelliJ IDEA 对硬件的要求看上去不是很高.可是实际在开发中其实并 ...
- PHP实现的简单组词算法
?php //组词算法 function diyWords($arr,$m){ $result = array(); if ($m ==1){//只剩一个词时直接返回 return $arr; } i ...
- linux + docker + selenium grid 实现分布式执行selenium脚本
Selenium Grid 有两个概念 hub :主节点,你可以看作 "北京总公司的测试经理". node:分支节点,你可以看作 "北京总公司的测试小兵A" 和 ...
- Windows C#入门环境搭建
Windows C#入门环境搭建 1. 安装Microsoft .NET Framework目录: C:\Windows\Microsoft.NET\Framework,查看已经安装的版本. 如果未安 ...
- 老方块Oracle--数值类型性能考虑
我们在设计数据库表,或者在使用SQL,写程序时都会经常用到数值类型.比如常见的number.int.float. float是浮点类型,也属于数值类型,我们最常用的是number类型. 他的格式是nu ...
- .NetCore源码阅读笔记系列之Security （三） Authentication & AddOpenIdConnect
通过第二篇文章我们已经知道了授权的内部实现通过自定义的授权Handler来的,同样的道理 OpenIdConnect 同样是通过 OpenIdConnectHandler来请求授权的 那么它内部又是怎 ...
- BZOJ1968 [Ahoi2005]COMMON 约数研究 数论
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1968 题意概括 求 ΣF(i) (1<=i<=n)N<=1000000 F( ...