原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01-原生js的拖拽</title>
</head> <body>
<div></div>
<div></div>
<div></div>
<div></div>
<script> /*
粗暴的写法 */
// var div = document.createElement("div");
// Object.assign(div.style, {
// width: "100px",
// height: "100px",
// backgroundColor: "deeppink",
// position: "absolute"
// });
// document.body.appendChild(div);
// div.addEventListener("mousedown", mouseDownHandler); // var x, y;
// function mouseDownHandler(e) {
// e.preventDefault();
// x = e.offsetX;
// y = e.offsetY;
// document.addEventListener("mousemove", mouseMoveHandler);
// document.addEventListener("mouseup", mouseUpHandler);
// }
// function mouseMoveHandler(e) {
// div.style.left = e.clientX - x + "px";
// div.style.top = e.clientY - y + "px";
// }
// function mouseUpHandler(e) {
// document.removeEventListener("mousemove", mouseMoveHandler);
// document.removeEventListener("mouseup", mouseUpHandler);
// } /*
解耦的写法 */
init();
function init() {
var divs = document.querySelectorAll("div");
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener("mousedown", mouseHandler);
Object.assign(divs[i].style, {
width: "100px",
height: "100px",
backgroundColor: "deeppink",
position: "absolute"
});
}
}
function mouseHandler(e) {
if (e.type === "mousedown") {
e.preventDefault();
document.point = {
x: e.offsetX,
y: e.offsetY
};
document.div = this;
document.addEventListener("mousemove", mouseHandler);
document.addEventListener("mouseup", mouseHandler);
} else if (e.type === "mousemove") {
this.div.style.left = e.clientX - this.point.x + "px";
this.div.style.top = e.clientY - this.point.y + "px";
} else if (e.type === "mouseup") {
this.removeEventListener("mousemove", mouseHandler);
this.removeEventListener("mouseup", mouseHandler);
}
} </script>
</body> </html>
jQuery拖拽：（注意jquery.js的引入是本地相对路径，如果没有可以换成网络路径）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02-jQuery的拖拽</title>
<script src="./js/jquery.js"></script>
</head>
<body>
<script>
$("<div></div>").css({
width:"100px",
height:"100px",
backgroundColor:"deeppink",
position:"absolute"
}).mousedown(function(e){
var div=$(this);
$(document).mousemove(function(e1){
div.offset({
left:e1.clientX-e.offsetX,
top:e1.clientY-e.offsetY
});
});
$(document).mouseup(function(){
$(this).off("mousemove mouseup");
});
}).appendTo("body");
</script>
</body>
</html>
vue.js拖拽：（注意vue.js的引入是本地相对路径，如果没有可以换成网络路径）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖拽</title>
<style>
div{
width: 100px;
height: 100px;
background-color: deeppink;
position: absolute;
}
</style>
</head>
<body>
<div id="app" v-drag.l="flag"> </div>
<script src="./js/vue.js"></script>
<script>
Vue.directive("drag",(el,{modifiers,value})=>{
let {l,t}=modifiers;
el.addEventListener("mousedown",mousedownHandler);
let disX,disY;
function mousedownHandler(e){
disX=e.offsetX;
disY=e.offsetY;
document.addEventListener("mousemove",mousemoveHandler);
document.addEventListener("mouseup",mouseupHandler);
}
function mousemoveHandler(e){
let x=e.clientX-disX;
let y=e.clientY-disY;
if(!l&&!t){
el.style.left=x+"px";
el.style.top=y+"px";
return;
}
if((l&&t)&&value){
el.style.left=x+"px";
el.style.top=y+"px";
return;
}
if(l&&value){
el.style.left=x+"px";
return;
}
if(t&&value){
el.style.top=y+"px";
return;
}
}
function mouseupHandler(){
document.removeEventListener("mousemove",mousemoveHandler);
document.removeEventListener("mouseup",mouseupHandler);
}
}) let vm=new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</body>
</html>
原生js拖拽、jQuery拖拽、vue自定义指令拖拽的更多相关文章
- 原生JS取代一些JQuery方法的简单实现
原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.选 ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令使用方法详解 和 使用场景
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- Vue | 自定义指令和动态路由实现权限控制
功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- vue 自定义指令的魅力
[第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...
随机推荐
- 【ECharts】1.学习ECharts从现在开始：第一个Echart图形
首先,你需要下载ECharts所需的文件,我使用的是echarts-2.0.2版本,点击这里下载:echarts-2.0.2 下载解压后,下面有一系列文件夹,其中build中有我们需要引入的JS文件, ...
- 解决node fs.writeFile 生成csv 文件乱码问题
解决node fs.writeFile 生成csv 文件乱码问题: fs.writeFile('xxx.csv', '\ufeff' + 要传入的数据, {encoding: 'utf8'}); \u ...
- WPF 隐藏式控件
没用Popup用的面板控件,全部代码使用xaml的触发器. 代码: <Grid> <DockPanel> <StackPanel Background=" Do ...
- kali渗透综合靶机(三)--bulldog2靶机
kali渗透综合靶机(三)--bulldog2靶机 靶机地址:https://download.vulnhub.com/bulldog/Bulldog2.ova 一.主机发现 1.netdiscove ...
- Kafka学习笔记之Kafka High Availability(下)
0x00 摘要 本文在上篇文章基础上,更加深入讲解了Kafka的HA机制,主要阐述了HA相关各种场景,如Broker failover,Controller failover,Topic创建/删除,B ...
- FocusVisualStyle
<Style x:Key="MyFocusVisual"> <Setter Property="Control.Template"& ...
- NET 线程可传递参数
1.多线程执行方法 /// <summary> /// 随机数保存队列 /// </summary> private Queue<string> _randomQu ...
- 你不知道的Go unsafe.Pointer uintptr原理和玩法
unsafe.Pointer 这个类型比较重要,它是实现定位和读写的内存的基础,Go runtime大量使用它.官方文档对该类型有四个重要描述: (1)任何类型的指针都可以被转化为Pointer (2 ...
- 高精度gcd
#include<iostream> #include<cstdio> #include<cstring> #define inf 1000000000 using ...
- 小鸟初学Shell编程（八）环境变量、预定义变量与位置变量
环境变量 环境变量:每个Shell打开都可以获得到的变量. 我们知道通过export的方式打开可以让子进程读取父进程的变量的值,那怎么样才能让每一个进程都能读取到变量的值呢? 在这呢,系统有一些默认的 ...