<!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. enable multi-tenancy on openstack pike

    Multi-tenancy 是openstack ironic从Ocata版本开始支持的新特性,通过network-generic-switch插件控制交换机,Ironic可以实现在不同租户间机网络隔 ...

  2. 搭建多系统yum服务器

    一.多系统服务器搭建 1.首先挂载光盘 2.安装vsftp 3.使用rpm -ql vsftpd查看vsftpd安装时都产生了哪些文件,找到以.server结尾的文件路径.此文件的文件名就是vsftp ...

  3. 5.3 存储器、I/O和配置读写请求TLP

    本节讲述PCIe总线定义的各类TLP,并详细介绍这些TLP的格式.在这些TLP中,有些格式对于初学者来说较难理解.读者需要建立PCIe总线中与TLP相关的一些基本概念,特别是存储器读写相关的报文格式. ...

  4. dm642的中断

    void fifoint_isr();            extern far void vectors(); void int_init() {  IRQ_resetAll();  IRQ_se ...

  5. Caused by: org.springframework.beans.factory.BeanCreationException: Could not autowire field

    1 错误描述 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'com.s ...

  6. 我们web前端常用的一些Array对象及应用

    1. Array.filter() filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素. ES6: 2.Array.prototype.find() find() 方法返 ...

  7. 【BZOJ1924】【SDOI2010】所驼门王的宝藏（Tarjan，SPFA）

    题目描述 在宽广的非洲荒漠中,生活着一群勤劳勇敢的羊驼家族.被族人恭称为"先知"的Alpaca L. Sotomon是这个家族的领袖,外人也称其为"所驼门王". ...

  8. SPOJ：To the moon

    题面 vjudge Sol 主席树模板 # include <bits/stdc++.h> # define RG register # define IL inline # define ...

  9. [SDOI2015]星际战争

    水题啦 网络流+二分 误差才10^-3,乱搞直接开longlong暴力每个都乘1000,输出时除一下就好了 # include <bits/stdc++.h> # define IL in ...

  10. canvas练手项目（一）——选取图片

    今天无事可做,在春意盎然的下午突发奇想想做一个关于图片处理的在线网页应用.不要问我为什么做这个,因为我想做!关于这个项目,我想基于canvas来实现,canvas是个好东西,我一直很喜欢,就是我没有做 ...