<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 -</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<style>
.left,.right{
position: absolute;
height: 50px;
width: 50px;
background: #666;
}
</style>
</head>
<body>
<div class="main">
<div class="left" @mousedown='drag($event)' >
<div style='width:20px;height:20px;background:red'></div>
</div>
<!-- <div class="right"></div> -->
</div>
<script>
var vm1=new Vue({
el:'.main',
data:{
ths:[
{top:'30'},
{top:''}
]
},
methods:{
drag:function(e,index){
console.log(e.target.parentNode.children[0])
var Left=e.target;
// leftW=Left.offsetWidth,
// startX=e.clientX;
// _this=this;
// console.log(_this);
document.onmousemove=function(e){
e.preventDefault();
var distx=e.clientX;
var disty=e.clientY
// -startX;
Left.style.top=disty+'px';
Left.style.left=distx+'px';
// if(parseInt(Left.style.width)>=280){
// Left.style.width=280+'px';
// }
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
}
});
</script>
</body>
</html>

vue简单的自由拖拽的更多相关文章

  1. jquery插件-自由拖拽

    最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...

  2. Vue. 之 Element dialog 拖拽

    Vue. 之 Element dialog 拖拽 默认情况下,在使用Element的Dialog模块时,弹出框是不能移动的,且 一旦点击遮罩层区域,弹框就会消失. 解决方案: 1 在 utils 中新 ...

  3. vue自由拖拽、缩放组件

    github地址:https://github.com/kirillmurashov/vue-drag-resize 安装: npm i -s vue-drag-resize 使用: <temp ...

  4. 自由拖拽DIV实现

    最近在做的项目有个效果是要实现div随意拖拽改变大小,前端框架选择的是vue.js,UI用的是element,拖拽效果可以很简单的实现,但是在拖拽过程中发现会对其他元素实现全选效果,因此最后选择使用元 ...

  5. HTML5自学笔记[ 10 ]简单的购物车拖拽

    用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta ...

  6. 简洁的drag效果，自由拖拽div的实现及注意点

    偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...

  7. Javascript自由拖拽类

    基本拖拽配置 new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true ...

  8. 关于自由拖拽完成的剪切区域（UI组件之图片剪切器）

    var x, y,areaWidth,areaHeight; var down;//闪光的判断标准,很好 addEvent(canvas,'mousedown',function(e){ // con ...

  9. Vue 表单拖拽排序

    Vue table表单拖拽 业务需求: 因为数据展示使用的是 elementUI 的 Table进行数据展示的,现在的需求是通过拖拽表单进行表单排序.同时,动态修改表单中的数据排列顺序.查阅了好多资料 ...

随机推荐

  1. 【CF 678F】Lena and Queries

    Time Limit: 2000 ms   Memory Limit: 512 MB Description 初始有一个空集合 n个操作 有三种操作,如下: 1 a b 表示向集合中插入二元组(a,b ...

  2. (转载)SVM-基础(三)

    支持向量机: Kernel  by pluskid, on 2010-09-11, in Machine Learning     70 comments 本文是"支持向量机系列" ...

  3. 阿里开源的热补丁框架AndFix使用教程

    阿里巴巴推出的AndFix框架 首次给出大家这个框架的地址:https://github.com/alibaba/AndFix 对源码比较感兴趣的同学们可以自行研究代码 AndFix原理介绍 AndF ...

  4. ssh禁止密码登录

    1.root用户登陆后,运行以下第一句指令,其他根据提示进行输入: ssh-keygen -t rsaGenerating public/private rsa key pair.Enter file ...

  5. SCADA系统

    简介编辑 在电力系统中,SCADA系统应用最为广泛,技术发展也最为成熟.它在远动系统中占重要地位,可以对现场 SCADA系统 的运行设备进行监视和控制,以实现数据采集.设备控制.测量.参数调节以及各类 ...

  6. java.sql.SQLException:ORA-01861:文字和格式字符串不匹配

    1.错误描述 java.sql.SQLException:ORA-01861:文字和格式字符串不匹配 2.错误原因 字段名为statis_date在数据库中存储的数据类型是Date,而在Java中拼接 ...

  7. RHEL部署ipa红帽身份验证

    1.先下载必须包 yum install -y ipa-server bind bind-dyndb-ldap 2.初始化ipa基本配置 ipa-server-install * Configure ...

  8. dom文档对象模型图

  9. 【NFS】nfs安装调优

    nfs [root@flymaster ~]# rpm -qa nfs-utils rpcbindnfs-utils-1.2.3-75.el6.x86_64rpcbind-0.2.0-13.el6_9 ...

  10. java　中的值传递和引用传递

    public class PassValue { /** * 值传递 基本数据类型参数 * 值传递:方法调用时,实际参数吧他的值传递给对应的形式参数,方法执行中形式参数值的改变不影响实际参数的值 */ ...