一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载 AI头条

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > jsp教程 > Java基础

推荐专题

最新下载

热门教程

JS实现简单拖拽效果

时间：2022-06-29 01:28:36 编辑：袖梨 来源：一聚教程网

本文实例为大家分享了JS实现拖拽效果的具体代码，供大家参考，具体内容如下

 

 代码如下复制代码

Document

#wrap {

position: relative;

border: 1px solid #000;

width: 800px;

height: 500px;

}

#drog {

position: absolute;

left: 0;

top: 0;

width: 100px;

height: 100px;

background: red;

cursor: move;

}

(function(){

var drog = document.querySelector('#drog');

/*

1.记录按下的时候的鼠标位置

2.记录按下的时候元素的位置

*/

drog.onmousedown = function(e){

var startElY = css(drog,"top");

var startElX = css(drog,"left");

var startMouseX = e.clientX;

var startMouseY = e.clientY;

 

/*

求出鼠标移动的距离，

操作元素也移动相应的距离

 

为了可以一直跟随，所以添加给document

*/

document.onmousemove = function(e){

var nowMouseX = e.clientX;

var nowMouseY = e.clientY;

var disX = nowMouseX - startMouseX;

var disY = nowMouseY - startMouseY;

var x = disX + startElX;

var y = disY + startElY;

css(drog,"left",x);

css(drog,"top",y);

};

document.onmouseup = function(){

document.onmousemove = null;

document.onmouseup = null;

};

};

})();

 

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2022 www.111CN.NET AII Right Reserved

网站内容来自网络整理或网友投稿如有侵权行为请邮件:[email protected] 我们24小时内处理