JS—实现拖拽
JS中的拖拽示例:
1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变
2)实现拖拽遇到的问题:
问题1:当鼠标按下移动过快时,离开了拖拽的物体时,这时拖拽物体将不再随着鼠标移动
因为拖拽的div太小了,这时我们可以将在拖拽物体上的mousemove事件放到document上面
同时将mouseup也改为document上面的事件
IE下直接用obj.setCapture()即可解决,但要做三个浏览器的兼容问题
问题2:在FF中第二次拖拽,空div的Bug
解决方法:在mousedown函数上面添加阻止默认行为即可:return false;
问题3:会出现将div脱出浏览器窗口的情况,用户体验不好
解决方法:限制div的拖动范围
问题4:对于图片拖拽--阻止默认事件return false
问题5:当拖拽图片或者div时,经过其他文字时,会出现文字选中
解决方法：
1.阻止默认事件return false
--return false为新版浏览器FF,Chrome,IE9-11阻止了这个问题,但是IE8以下却不行
2.IE下解决拖拽时文字选中问题--用事件捕获(只写IE下认识的事件),要解决兼容问题
3)事件捕获:只有IE识别
obj.setCapture()--作用是将整个网页中所有的事件集中在某个对象上,即网页中的其他对象不能获得事件
obj.releaseCapture()--解除事件捕获
示例1:拖拽1,不拖出对象的父级dragDiv
<!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>Document</title>
<style media="screen">
#dragDiv{
width:400px;
height: 400px;
background: #ccc;
position: relative;
margin: 20px;
}
#drag{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="dragDiv">
11111111111111111111
<div id="drag">拖拽2-有范围拖拽</div>
</div> <script type="text/javascript">
window.onload=function(){
//拖拽,不拖出对象的父级dragDiv
var oDragDiv=document.getElementById('dragDiv');
var oDrag=document.getElementById('drag');
oDrag.onmousedown=function(ev){
var oEvent=ev||event;
var pos=getMousePosition(oEvent);
var disX=pos.x-oDrag.offsetLeft;
var disY=pos.y-oDrag.offsetTop;
if(oDrag.setCapture){
//兼容IE7-11
oDrag.onmousemove=Mousemove;
oDrag.onmouseup=mouseUp;
oDrag.setCapture();
}else{
//兼容FF,Chrome
document.onmousemove=Mousemove;
document.onmouseup=mouseUp;
} function getMousePosition(ev){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
};
//合并代码
function Mousemove(ev){
var oEvent=ev||event
var pis=getMousePosition(oEvent);
var l=pis.x-disX;
var t=pis.y-disY; //限制范围,磁性吸附,快接近父级时,自动吸附上去
if (l<30) {
l=0;
}else if(l>oDragDiv.offsetWidth-oDrag.offsetWidth){
l=oDragDiv.offsetWidth-oDrag.offsetWidth;
}
if (t<30) {
t=0;
}else if(t>oDragDiv.offsetHeight-oDrag.offsetHeight){
t=oDragDiv.offsetHeight-oDrag.offsetHeight;
}
oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
};
function mouseUp(){
//当鼠标抬起时,mousemove/up清空
this.onmousemove=null;
this.onmouseup=null;
if (oDrag.releaseCapture) {
oDrag.releaseCapture();
}
};
return false; //FF等高版本浏览器中阻止默认行为
};
}
</script>
</body>
</html>
示例2:带框的拖拽:
<!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>Document</title>
<style media="screen">
#dragDiv1{
width:400px;
height: 400px;
background: #ccc;
position: relative;
margin: 20px;
}
#drag1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
.box{
border: 1px dashed black;
position: absolute;
}
</style>
</head>
<body>
<div id="dragDiv1">
11111111111111111111
<div id="drag1">拖拽2-带框拖拽</div>
</div> <script type="text/javascript">
window.onload=function(){
//拖拽3:结合DOM,带框的拖拽
var oDragDiv1=document.getElementById('dragDiv1');
var oDrag1=document.getElementById('drag1');
oDrag1.onmousedown=function(ev){
var oEvent=ev||event;
var pos=getMousePosition(oEvent);
var disX=pos.x-oDrag1.offsetLeft;
var disY=pos.y-oDrag1.offsetTop;
//定义拖出来的框
var oBox=document.createElement('div');
oBox.className='box';
oBox.style.width=oDrag1.offsetWidth-2+'px';
oBox.style.height=oDrag1.offsetHeight-2+'px';
//每次拖动时,给虚框div的初始位置和红色实体初始位置相同,防止虚框闪动
oBox.style.left=oDrag1.offsetLeft+'px';
oBox.style.top=oDrag1.offsetTop+'px';
oDragDiv1.appendChild(oBox);
if(oBox.setCapture){
//兼容IE7-11
oBox.onmousemove=Mousemove;
oBox.onmouseup=mouseUp;
oBox.setCapture();
}else{
//兼容FF,Chrome
document.onmousemove=Mousemove;
document.onmouseup=mouseUp;
} function getMousePosition(ev){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
};
//合并代码
function Mousemove(ev){
var oEvent=ev||event
var pis=getMousePosition(oEvent);
var l=pis.x-disX;
var t=pis.y-disY; //3.限制范围,磁性吸附,快接近父级时,自动吸附上去
if (l<30) {
l=0;
}else if(l>oDragDiv1.offsetWidth-oBox.offsetWidth){
l=oDragDiv1.offsetWidth-oBox.offsetWidth;
}
if (t<30) {
t=0;
}else if(t>oDragDiv1.offsetHeight-oBox.offsetHeight){
t=oDragDiv1.offsetHeight-oBox.offsetHeight;
}
oBox.style.left=l+'px';
oBox.style.top=t+'px';
};
function mouseUp(){
//当鼠标抬起时,mousemove/up清空
this.onmousemove=null;
this.onmouseup=null;
oDrag1.style.left=oBox.offsetLeft+'px';
oDrag1.style.top=oBox.offsetTop+'px';
oDragDiv1.removeChild(oBox);
if (oBox.releaseCapture) {
oBox.releaseCapture();
}
};
return false; //FF中阻止默认行为
};
}
</script>
</body>
</html>
示例3:拖拽实现自定义滚动条
<!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>Document</title>
<style media="screen">
#scroll{
width: 500px;
height: 20px;
background: #ccc;
position: relative;
margin: 20px;
border-radius: 3px;
}
#drag2{
width: 20px;
height: 20px;
background: red;
border-radius: 3px;
position: absolute;
}
#scrollCtrl{
width: 150px;
height: 150px;
filter: alpha(opacity:0);
opacity: 0;
background: green;
margin: 20px;
}
#ctrlWords{
width: 300px;
height: 400px;
border: 1px solid #000;
margin: 20px;
position: relative;
overflow: hidden;
}
#words{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="scroll">
<div id="drag2"></div>
</div>
<div id="scrollCtrl"></div> <div id="ctrlWords">
<div id="words">
每天开心快乐的生活是我们每个人追求的目标，有人孜孜不倦，苦苦追寻，仍找不到快乐的影踪。有人默默不语，静静守候，快乐总是如期而至，伴其左右。 一名记者到一个集市上采访，他看到一个年迈的老太太在一个角落里卖柠檬，“柠檬！柠檬！五毛钱一个！”老人有气无力地喊着，老太太的生意显然不太好，一上午也没卖几个。记者动了恻隐之心，打算把老太太的柠檬全部买下来，以使她能“高高兴兴地早些回家”。当他把自己的想法告诉老太太时，老太太的回答让他大吃一惊：“我现在都卖给你了，那我下午卖什么”。 快乐对于这位老太太来说，就是踏踏实实的生活，体会身边发生的点滴事情。我们的眼睛有时会欺骗我们，我们认为该烦恼的人其实是快乐的，而我们以为会快乐的人却充满了烦恼。真实的生活，往往会给人们带来无穷乐趣，只要你懂得去感受，你一定会收获快乐。 有一位为了金钱忙得焦头烂额而且并不快乐的爸爸问女儿：“你快乐吗？”女儿高兴地回答说：“快乐”。迷惑不解的爸爸说：“那什么是快乐呢？”女儿天真地回答说：”比如现在，我们都吃完了晚饭，你陪我在楼顶看星星，我感觉很快乐。”迷惑的爸爸一下子就清楚了自己不快乐的原因了。 女孩的快乐如此简单，却是来自内心最真实的快乐。仔细体会，身边的一草一木，一花一叶，都能带给我们最纯真的快乐。心中平静喜悦，无论是仰望星空，还是低头赏花，是临水观鱼，还是听风赏雨，都是其乐无穷。
</div>
</div> <script type="text/javascript">
window.onload=function(){
//自定义滚动条
var scroll=document.getElementById('scroll');
var oDrag2=document.getElementById('drag2');
var scrollCtrl=document.getElementById('scrollCtrl');
var ctrlWords=document.getElementById('ctrlWords');
var words=document.getElementById('words');
oDrag2.onmousedown=function(ev){
var oEvent=ev||event;
var pos=getMousePosition(oEvent);
var disX=pos.x-oDrag2.offsetLeft;
if(oDrag2.setCapture){
//兼容IE7-11
oDrag2.onmousemove=Mousemove;
oDrag2.onmouseup=mouseUp;
oDrag2.setCapture();
}else{
//兼容FF,Chrome
document.onmousemove=Mousemove;
document.onmouseup=mouseUp;
} function getMousePosition(ev){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
};
//合并代码
function Mousemove(ev){
var oEvent=ev||event
var pis=getMousePosition(oEvent);
var l=pis.x-disX; //3.限制范围
if (l<0) {
l=0;
}else if(l>scroll.offsetWidth-oDrag2.offsetWidth){
l=scroll.offsetWidth-oDrag2.offsetWidth;
}
oDrag2.style.left=l+'px';
//百分数scale0-100%
var scale=l/(scroll.offsetWidth-oDrag2.offsetWidth);
scrollCtrl.style.filter='alpha(opacity:'+scale*100+')';
scrollCtrl.style.opacity=scale;
words.style.top=-scale*(words.offsetHeight-ctrlWords.offsetHeight)+'px';
};
function mouseUp(){
//当鼠标抬起时,mousemove/up清空
this.onmousemove=null;
this.onmouseup=null;
if (oDrag2.releaseCapture) {
oDrag2.releaseCapture();
}
};
return false; //FF中阻止默认行为
};
}
</script>
</body>
</html>
JS—实现拖拽的更多相关文章
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
- js之拖拽事件
js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...
- js鼠标拖拽
html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...
- 原生Js实现拖拽（适用于pc和移动端）
效果: HTML和CSS部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- js 利用jquery.gridly.js实现拖拽并且排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 实现拖拽排序
<!DOCTYPE> <html lang="zh-cn"> <head> <meta http-equiv="Content- ...
- jquery.dragsort.js 实现拖拽过程遇到的问题
.在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative ...
- JS实现拖拽功能
本文代码地址(第一节):https://github.com/dirstart/js-exam/blob/master/%E6%8B%96%E6%8B%BDdiv1.html 第二节:https:// ...
- 原生js实现拖拽效果
面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...
随机推荐
- cocostudio做出来的界面如何进行分辨率适配，兼论cocos2dx3的多分辨率适配机制，以及retina适配机制
cocos有很多代码实际上都不再使用了,看代码时反而误导了程序员. 比如一个简单的分辨率适配,我查到了setContentSize,然后调用setContentSize,毫无用处啊!于是乎,我到处查资 ...
- [uva12170]Easy Climb
还是挺难的一个题,看了书上的解析以后还是不会写,后来翻了代码仓库,发现lrj又用了一些玄学的优化技巧. #include <algorithm> #include <iostream ...
- Unite洛杉矶峰会精彩回顾:从图形、平台再到VR
产品质量与工作流程 在Unity的研发过程中,保持创新的步伐与稳定性的平衡一直是一个挑战.Unity曾经向所有的用户承诺:Unity将专注于提升产品的质量并保证Unity版本稳定性的决心. 大会伊始, ...
- C/C++语言，自学资源，滚动更新中……
首先要说<一本通>是一个很好的学习C/C++语言的自学教材. 以下教学视频中,缺少对"字符串"技术的讨论,大家注意看书. 一维数组,及其举例:(第四版) ...
- 在Hyper-V中安装和配置Ubuntu网络
http://www.abcde.cn/knowledgebase/845/Hyper-VUbuntu.html (文中的nameserver要改成自己路由器的IP:我的是192.168.2.1.) ...
- C语言：使用命令行参数用字符串读取流和输出流进行文本文件的复制
#include<stdio.h> int main(int argc,char *argv[]) { //检查用户的参数是否正确 if(argc<3) { printf(" ...
- Android 使用Socket进行通信(Android)
一.服务器程序 服务器程序需要在PC上运行,该程序比较的简单,因此不需要建立Android项目,直接定义一个JAVA类,并且运行该类即可.它仅仅建立ServerSocket监听,并使用Socket获取 ...
- win10快速开机
百度经验:jingyan.baidu.com 在win8系统出现以后的win系统中,都有一个特点,那就是快速启动,可是,相信大家都有这样一个问题,就是,自己明明用的是win8(或者win10)系统,可 ...
- Yaf(Yet Another Framework)用户手册 yii框架手册
地址:http://www.laruence.com/manual/ yaf框架手册:http://pan.baidu.com/s/1bnHFPHd yii框架手册:http://pan.baidu. ...
- 安装ionic出现node-sass无法下载的解决方法
解决方法: 修改C:\users\[用户名]下的.npmrc文件: registry=https://registry.npm.taobao.org sass-binary-site=https:// ...