最简洁的js鼠标拖曳效果【原】
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>DragDrop</title>
<meta name="author" content="flowerszhong">
<meta name="date" content="">
<link href="" rel="stylesheet" type="text/css" />
<!--[if IE]>
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
<![endif]-->
<!-- <script src="http://code.jquery.com/jquery-latest.js"></script> -->
<style type="text/css">
.redBorderBox
{
border: 2px solid red;
position: absolute;
width: 60px;
height: 60px;
cursor: move;
background-color: Red;
}
</style>
</head>
<body>
<div id="hd">
</div>
<div id="bd">
<div class="redBorderBox" id="dragObj1">
i am not dragObj</div>
<div class="redBorderBox dragObj" id="dragObj2" style="top: 90px; left: 90px;">
u can drag me</div>
</div>
<div id="ft">
</div>
</body>
<script>
/* 鼠标拖动 */
(function() {
var oDrag = "";
var ox, oy, nx, ny, dy, dx;
function drag(e) {
var e = e ? e : event;
oDrag = e.target ? e.target : e.srcElement;
if (oDrag.className.indexOf("dragObj") == -1) { oDrag = ""}
ox = e.clientX;
oy = e.clientY;
}
function dragPro(e) {
if (oDrag != "") {
var e = e ? e : event;
dx = parseInt(oDrag.style.left);
dy = parseInt(oDrag.style.top);
nx = e.clientX;
ny = e.clientY;
oDrag.style.left = (dx + (nx - ox)) + "px";
oDrag.style.top = (dy + (ny - oy)) + "px";
ox = nx;
oy = ny;
}
}
document.onmousedown = function(e) { drag(e); }
document.onmouseup = function() { oDrag = ""; }
document.onmousemove = function(event) { dragPro(event); }
})();
</script>
</html>
感谢你留言，转载请声明出处：http://www.cnblogs.com/flowerszhong
转载于:https://www.cnblogs.com/flowerszhong/archive/2011/08/16/2140491.html
最简洁的js鼠标拖曳效果【原】相关推荐
- 鼠标移动div效果：鼠标拖曳效果
通过简单的鼠标事件,获取实时的鼠标坐标,和实时的div坐标,实现鼠标对div的拖曳效果. 注意事项: 1.event监听事件:有同步性,信息的一种及时交互. 2.获取鼠标实时坐标的三种方法:clien ...
- JavaScript:鼠标拖曳效果
样式: <style>body {margin: 0}.box {width: 400px;height: 300px;border: 5px solid #eee;box-shadow: ...
- js之鼠标的拖曳效果
js之鼠标的拖曳效果 效果如下: 下面是代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
- JS实现QQ面板-拖曳效果
实现的功能是将整个QQ面板在特定区域点击鼠标按下移动,面板会随着光标移动而移动,这可以称为鼠标跟随效果,也叫拖曳效果. 首先是确定HTML结构,定义一个父元素模拟整个QQ面板,设置标题区域用于JS选中 ...
- JS 实战: Drag 点击拖曳效果
JS 实战: Drag 点击拖曳效果 文章目录 JS 实战: Drag 点击拖曳效果 简介 参考 正文 项目结构 & 静态模版 添加元素 添加 position 主要逻辑片段 事件响应结构 移 ...
- js 实现鼠标拖曳div
js 实现拖曳的3个事件,点击时鼠标按下(mousedown事件).移动时(mousemove事件).松开时(mouseup事件),既鼠标按下才能移动div,鼠标松开就不能再移动了. <!DOC ...
- html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
- js检测鼠标是否在操作_原生JS趣味demo：炫酷头像鼠标追随效果的实现
我们常在一些网页中 可以看到鼠标追随效果 一个简单的图片.动画 甚至一小段文字 都可以作为鼠标跟随的载体 之前咱们的直播课中 老师也讲过相关的canvas追随粒子特效 今天 就让我们一起来用原生js ...
- 怎么给html增加鼠标跟随,js实现简单鼠标跟随效果的方法
本文实例讲述了js实现简单鼠标跟随效果的方法.分享给大家供大家参考.具体分析如下: 鼠标跟随,顾名思义,就是在鼠标移动的时候,有个动画跟随着鼠标一起移动. 要点一: var oEvent = evt ...
最新文章
- LuckyFrame V2.7.2 Beta 发布，一站式自动化测试平台
- 中美5G竞争的未来路线图
- Ubuntu14搭建配置青岛大学OJ系统
- Java项目导出为可执行jar包，并在windows/linux下运行
- python：字符串常用处理函数：
- mysql router手册_mysql router
- Another kind of Fibonacci
- 深度学习-人工神经网络概述
- 如何判断当前请求的是健康检查API
- linux 常用工具
- 鼐鼐家为用户打造3D互动体验式营销解决方案
- Java集合 Collection
- 阿里云轻量应用服务器解读，为中小企业提供数字化的解决之道
- 编译telepresence：没有规则可制作目标“tinywrap/ActionConfig.cxx”，由“telepresence-ActionConfig.o” 需求。
- linux的sssd服务,linux – SSSD进程不会死
- 广州图普网络科技2017校园招聘简章
- matlab 频域滤波
- 微软crm 开发笔记 系统配置使用
- Googlenbsp;Calendarnbsp;与amp;nbs…
- 委外采购申请或委外订单收货完成后，造成的MRP异常处理