<!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. Codeforces 257D

    题意略. 思路:这个题目最重要的是那个不等式 a[i] <= a[i+1] <= 2 * a[i]  ,你会发现0 <= a[i+1]  -  a[i] <= a[i],令x ...

  2. Linux shell的问题

    1.uptime命令可以查看当前系统的启动时间: w命令显示当前登录者top命令显示当前任务ps命令显示所有进程信息 uptime命令可以查看系统启动时间   2.使用shell时,默认的环境变量放在 ...

  3. web前端研发工程师编程能力成长之路

    [背景] 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

  4. 后台模拟请求 HttpHelper 序列化 MD5 时间戳

    使用场景 C# 服务器后台调用其他服务器并处理 场景 /// <summary> /// 获取用户信息 /// </summary> /// <param name=&q ...

  5. 【Unity3D】Unity3D 摄像机带透明截图

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/CropCamera.html ↓↓↓下面的废话可以不看↓↓↓ 最近处理了一批我的游戏的图标,步骤特别繁琐, 需要先 ...

  6. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  7. 利用Caffe训练模型(solver、deploy、train_val)+python使用已训练模型

    本文部分内容来源于CDA深度学习实战课堂,由唐宇迪老师授课 如果你企图用CPU来训练模型,那么你就疯了- 训练模型中,最耗时的因素是图像大小size,一般227*227用CPU来训练的话,训练1万次可 ...

  8. win7 vs2012+wdk8.0 搭建wdf驱动开发环境

    开发环境搭建:系统:win7 x64工具:vs2012 + WDK8.0插件:wdfcoinstaller.msi(1)先安装vs2012,再安装wdk8.0,这样在打开vs2012时可以创建wind ...

  9. 【linux】linux下能ping通ip 但是不能ping通域名

    经过一翻查找后解决了,原因和方法如下: [root@~]# grep host /etc/nsswitch.conf#hosts: db files nisplus nis dnshosts:     ...

  10. JavaScript去除日期中的“-”

    JavaScript去除日期中的"-" 1.说明 经常会出现这样的情况,页面的日期格式是:YYYY-MM-DD,而数据库中的日期格式是:YYYYMMDD,两者之间需要转换一下,方能 ...