李炎恢 js教程拖拽上思路解析

李炎恢再讲js教程拖拽上

讲到一个登录框，通过鼠标移动登录框到浏览器各个地方，我们现在对李炎恢的怎么想出进行分析：

问题期望是什么？

1.我们通过鼠标点击登录框，然后登录框被移动，松开鼠标，停止移动。

问题实际是什么？

1.我们拥有这个登录框的id

2.这里涉及到我们学过三个鼠标事件

要实现拖拽的流程：

1 先点下去

2 在点下物体被选中，进行move移动

3.抬起鼠标，停止移动

拖拽思路

第一步通过dom方法获取登录的节点 var oDiv =document.getElementById('login');

第二步通过鼠标点击事件来进行拖拽流程代码编写

第一步流程先点下去

1）谁点下去？oDiv

2) 点下是什么事件？onmousedown

翻译成 js代码如下 oDiv.οnmοusedοwn=function(){ };

第二步流程在点下物体被选中，进行move移动

1）点下物体是什么？oDiv

2）被选中? 通过onmousedwon 事件被选中

3)进行move移动?oDIV通过onmousemove事件来进行移动

js代码r如下：

oDiv.οnmοusedοwn=function(){

oDiv.οnmοusemοve=function(){

};

3）移动的距离？

我觉得求物体移动的思路如下：

1.我们可以把鼠标移动物体距离的值看做是一个变量 var e=e||window.event;

2.物体的移动是从两个方向移动，所以我们要从经x y方向获取

js代码如下：

oDiv.style.left=e.clientX+'px';

oDiv.style.top=e.clientY+'px';

4）组合我们思路

oDiv.οnmοusedοwn=function(e){

oDiv.οnmοusemοve=function(e){

var e=e||window.event; oDiv.style.left=e.clientX+'px';

oDiv.style.top=e.clientY+'px'; oDiv.style.left=e.clientX+'px';

};

3 .抬起鼠标，停止移动

第三步流程抬起鼠标，停止移动

1）抬起鼠标？onmousemove事件

2）抬起之后，发生什么行为？停止移动。（也就是说oDiv.onmousemove事件没有了，所以为null,抬起鼠标的行为也消失）

用js描述如下

oDiv.οnmοuseup=function(){

oDiv.οnmοusemοve=null;

oDiv.οnmοuseup=null

}

3）组合上面所有思路

oDiv.οnmοusedοwn=function(e){

//先点下去

oDiv.οnmοusemοve=function(e){

//在点下物体被选中，进行move移动

var e=e||window.event;

oDiv.style.left=e.clientX+'px';

oDiv.style.top=e.clientY+'px';

};

//抬起鼠标，停止移动

oDiv.οnmοuseup=function(){

oDiv.οnmοusemοve=null;

oDiv.οnmοuseup=null

}

};

第三步运行代码，出现一个问题，那就是移动登录框时，只能向下向右移动，如何解决？

因为鼠标点下来区域应该是在登录框的范围内，而移动和松开鼠标是整个浏览器的页面所以只需要onmousemove和onmouseup。

js代码如下：

oDiv.οnmοusedοwn=function(e){

//先点下去

document.οnmοusemοve=function(e){

//在点下物体被选中，进行move移动

var e=e||window.event;

oDiv.style.left=e.clientX+'px';

oDiv.style.top=e.clientY+'px';

};

//抬起鼠标，停止移动

document.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null

}

};

第四步运行代码，我们在移动登录框时，鼠标点下去移动十分不灵活，那么如何解决这个问题？

我觉得思路如下：

1. 首先求出点击鼠标点击的区域与登录框的距离

x轴距离 var diffX=e.clientX-oDiv.offsetLeft;

y轴距离 var diffY=e.clientY-oDiv.offsetTop;

2.再求出登录框与body之间的距离（此为物体移动的距离，这就好比小学语文课本刻舟求剑说有个楚国人，坐船渡河时不慎把剑掉入河中，他在船上用刀刻下记号，说：“这是我的剑掉下去的地方，一会儿到岸的时候我就在这跳下去找剑。”当船停下时，他沿着记号跳入河中找剑，遍寻不获。这里他在船里的距离与他在河里移动距离都不是，船移动的距离，而船移动的距离应该是他在船里的距离与他在河边距离之差。如果是用他与河边的距离作为船移动的距离，那这个楚国人就只能在船里呆着，船要是移出去他就掉水里。）

x轴距离 oDiv.style.left =e.clientX-diffX+"px";

y轴距离 oDiv.style.top=e.clientY-diffY+'px';

3.组合思路

oDiv.οnmοusedοwn=function(e){

//先点下去

var e=e||window.event;

var diffX=e.clientX-oDiv.offsetLeft; // x轴距离

var diffY=e.clientY-oDiv.offsetTop; // y轴距离

document.οnmοusemοve=function(e){

//在点下物体被选中，进行move移动

var e=e||window.event;

oDiv.style.left =e.clientX-diffX+"px";

oDiv.style.top=e.clientY-diffY+'px';

};

//抬起鼠标，停止移动

document.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null

}

};

李炎恢 js教程拖拽上思路解析相关推荐

李炎恢bootstrap写首页内容上思路解析
关于利用bootstrap做一张图片对应一段文字,这是李炎恢思路是一生二,二生三,三生万物的思路第一步做一个大盒子,这好比修房子,你要划出一块区域给我 <div class="ro ...
原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
JavaScript实现拖拽上传解析 APK 信息
点击上方蓝字,关注我们技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档参考:前端解析ip ...
php拖拽上传_JS实现的文件拖拽上传功能示例
本文实例讲述了JS实现的文件拖拽上传功能.分享给大家供大家参考,具体如下: www.ddpool.cn JS文件拖拽上传 div{ width: 300px; height: 300px; borde ...
html5 上传超大文件,HTML5教程如何拖拽上传大文件
本篇教程探讨了HTML5教程如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...
dropzone.js php,Laravel 5.1 中基于 Dropzone.js 实现图片拖拽上传及删除功能
注:本教程代码适用于Laravel 5.1版本. 1.概述 Dropzone 是目前最好的免费文件拖拽上传库,它拥有很多特性和选项以便你可以使用多种方式来自定义. 在Laravel项目集成Dropzo ...
Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
js使用input上传文件夹、拖拽上传文件夹并将文件夹结构展示为树形结构
一.实现效果左侧区域支持选择一个系统中的文件夹,或者将文件夹拖拽到这个区域进行上传,右侧区域可以将文件夹的结构展示为树形结构. 二.代码实现由于需要使用树形插件zTree,这个插件是依赖于jque ...
js实现文件拖拽上传并显示待上传的文件列表
此文章中完整的代码在我的github中:https://github.com/LiuFeng1011/WebTest/tree/master/upload 首先实现html页面的内容: <bod ...

李炎恢 js教程拖拽上思路解析

李炎恢 js教程拖拽上思路解析相关推荐

最新文章

热门文章

李炎恢 js教程 拖拽上 思路解析

李炎恢 js教程 拖拽上 思路解析相关推荐

最新文章

热门文章

李炎恢 js教程拖拽上思路解析

李炎恢 js教程拖拽上思路解析相关推荐