<!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. 关键字final的用法

    final关键字可以用来修饰类.方法和变量. 1.final修饰的类不能被继承. 2.final修饰的方法不能被重写. 3.final修饰的变量是常量,不能修改其值.

  2. HTTP状态码作用

    文章目录 状态码分类 常见的状态码 1xx消息 2xx成功 3xx重定向 4xx客户端错误 5xx服务器错误 HTTP状态码的作用是:web服务器用来告诉客户端,发生了什么事. 状态码位于HTTP R ...

  3. R︱Rstudio 1.0版本尝鲜（R notebook、下载链接、sparkR、代码时间测试profile）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 2016年11月1日,RStudio 1.0版 ...

  4. Android设备唯一码的获取

    Android设备唯一码的获取 UTDID是集团无线设备统一ID方案,目的是给每一台设备一个ID,作为唯一标识.UTDID由客户端生成,并在设备中各个客户端之间共享.UTDID的生成中包含时间戳和随机 ...

  5. jsp页面报错（一）

    jsp页面报错 1.错误位置 <form action="../page/areaType.action" method="POST"> <j ...

  6. 个性化WinPE封装方法 ----最后实战“制作WinPE3.0图文教程”

    经过前几讲,主要目的就是准备一些"原材料",熟悉一些"命令",实际上是"战前演练准备".下面要进入"实战状态",成败在此 ...

  7. 解决MyEclipse中的Building workspace问题

    解决MyEclipse中的Building workspace问题 1.方法一 点击"Project",取消勾选"Build Automatically" 2. ...

  8. MyEclipse中修改项目运行地址栏中项目名称

    MyEclipse中修改项目运行地址栏中项目名称 1.如果出现从SVN上检出的项目名称跟运行地址栏中的项目名称不一致, 可以通过以下步骤进行修改 项目鼠标右键,单击"Properties&q ...

  9. MiniGUI + Hi3531 笔记 .

    一.移动光驱安装Ubuntu 10.04 1.   重启系统按住Delete进入BIOS界面! 2.   退出/高级模式 --> 启动 --> 启动设备选择. 移动光驱正常被识别后这里应该 ...

  10. MyEclipse10+Flash Builder4+BlazeDS+Tomcat7配置J2EE Web项目报错（一）

    1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...