一 代码
HTML代码：
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 拖放效果 </title> </head> <body> <!-- 导入JavaScript脚本文件 --> <script src="drag.js"></script> <!-- 定义被拖放的元素 --> <div style="position:absolute; left:120px; top:150px; width:250px; border:1px solid black;"> <div style="background-color:#416ea5; width:250px; height:22px; cursor:move; font-weight:bold; border-bottom:1px solid black;" onmousedown="drag(this.parentNode, event);"> 可拖动标题 </div> <p>可被拖动的窗口</p> <p>窗口内容</p> </div> <!-- 定义一个可拖动的图片 --> <img src="image/logo.jpg" alt="按住Shift可拖动" style="position:absolute;" onmousedown="if (event.shiftKey) drag(this, event);" /> </body> </html>
JS代码：
var drag = function(target, event)
{
// 定义开始拖动时的鼠标位置（相对window座标）
var startX = event.clientX;
var startY = event.clientY;
// 定义将要被拖动元素的位置（相对于document座标）
// 因为该target的position为absolutely，
// 所以我们认为它的座标系是基于document的
var origX = target.offsetLeft;
var origY = target.offsetTop;
// 因为后面根据event的clientX、clientY来获取鼠标位置时，
// 只能获取windows座标系的位置，所以需要计算window座标系
// 和document座标系的偏移。
// 计算windows座标系和document座标系之间的偏移
var deltaX = startX - origX;
var deltaY = startY - origY;
// 鼠标松开的事件处理器
var upHandler = function(evt)
{
// 对于IE事件模型，获取事件对象
if (!evt) evt = window.event;
// 取消被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）的事件处理器
if (document.removeEventListener)
{
// DOM事件模型
// 取消在事件捕获阶段的事件处理器
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent)
{
target.detachEvent("onlosecapture", upHandler);
target.detachEvent("onmouseup", upHandler);
target.detachEvent("onmousemove", moveHandler);
target.releaseCapture( );
}
// 阻止事件传播
stopProp(evt);
}
// 阻止事件传播(该函数可以跨浏览器)
var stopProp = function(evt)
{
// DOM事件模型
if (evt.stopPropagation)
{
evt.stopPropagation( );
}
// IE事件模型
else
{
evt.cancelBubble = true;
}
}
// 为被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）注册事件处理器
if (document.addEventListener)
{
// DOM事件模型
// 在事件捕获阶段绑定事件处理器
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent)
{
// IE事件模型
// 设置该元素直接捕获该事件
target.setCapture();
// 为该元素鼠标移动时绑定事件处理器
target.attachEvent("onmousemove", moveHandler);
// 为鼠标松开时绑定事件处理器
target.attachEvent("onmouseup", upHandler);
// 将失去捕获事件当成鼠标松开处理。
target.attachEvent("onlosecapture", upHandler);
}
// 阻止事件传播
stopProp(event);
// 取消事件默认行为
if (event.preventDefault)
{
// DOM事件模型
event.preventDefault( );
}
else
{
// IE事件模型
event.returnValue = false;
}
// 鼠标移动的事件处理器
function moveHandler(evt)
{
// 对于IE事件模型，获取事件对象
if (!evt) evt = window.event;
// 将被拖动元素的位置移动到当前鼠标位置。
// 先将window座标系位置转换成document座标系位置，再修改目标对象的CSS位置。
target.style.left = (evt.clientX - deltaX) + "px";
target.style.top = (evt.clientY - deltaY) + "px";
// 阻止事件传播
stopProp(evt);
}
}
二 运行结果
相关推荐
此拖拽功能兼容IE firefox等浏览器
浏览器拖拽 api fetch 请求 vue3 说来话长,长话短说,关于 html5 的拖拽 api 也只是做过一些拖拽排序的例子.其实思路上与其他拖拽上传组件基本一样,都是指定一个区域可拖拽,然后读取文件在上传 先说说拖拽 api,...
是有默认拖拽的比如说图片的拖拽选中文本的拖拽链接的拖拽浏览器默认允许我们拖拽图像、文本以及链接让其它元素被拖动也是可以实现的只需要在元素标签上添加一个属性当拖拽这个元素的时候，浏览器就会以半透明复本的...
猎豹浏览器具有首创的智能切换引擎，动态选择内核匹配不同网页，并且完美支持HTML5新国际网页标准，网页展现更炫酷，更动感，极速浏览的同时也充分保证兼容性。 猎豹安全浏览器3.0新特性： -新增安全中心, 全新...
傲游3浏览器是国内唯一具有独立内核的桌面浏览器产品，首创双核浏览模式，在安全、快速的基础上，保证了对网银、网购类网站的兼容性。傲游3浏览器内置云端广告过滤系统，强大而易用，确保用户在浏览网页时不受任何...
9.2.3 设置元素可拖动 192 9.2.4 传输和控制 192 9.3 构建拖放应用 193 9.4 拖放文件 201 9.5 进阶功能 205 9.6 小结 206 第10章 Web Workers API 207 10.1 Web Workers的浏览器支持情况 208 10.2 使用Web ...
本文介绍原生javascript实现元素拖动。 思路： 1.首先改变被拖动元素的布局属性，关键是“position:absolue”； 2.捕捉鼠标事件”mousedown”,”mousemove”,”mouseup”； 3.当触发”mousedown”时，记录下当前鼠标...
PlainDraggable 简单而高性能的库，允许拖动HTML / SVG元素。 特征： 接受HTML / SVG元素作为可拖动的元素。 支持鼠标和触摸界面。 限制可拖动区域。 将可拖动元素捕捉到其他元素，点，线，连续点（即网格）或其他...
* 小号窗口元素过滤失效 [插件平台] * 侧边栏新浪微博插件表情资源更新 * 解决一些接口实现问题 * 脚本注入环境下ajax请求被拒绝 * PAGE_LOADED 会触发两次 3.3.5.1000 2012-03-01 本次更新包含下列新特性: ...
使HTML元素可拖动，并支持多点触控。 主要实现使用触摸事件，但插件还具有使用鼠标事件的后备功能。 该插件存在的主要原因是，目前尚无用于使元素可拖动的良好jQuery插件，其主要目标是触摸设备（至少据我所知）。 ...
如何拖动任意元素 添加定制的拖动图标 可访问性 小结 第9章 geolocation 为访问者标记一个别针 api方法 抓住你：成功处理程序 它到底如何工作：这是魔术 小结 第10章 messages、worker和socket ...
将一个HTML元素显示到屏幕的正中间，并且当浏览器窗口大小改变及拖动滚动条时，元素依然保持在正中间。
1.JQuery原创HTML5可拖拽小游戏； 2.实现容器间的元素拖拽功能源码，面向对象开发模式，可多浏览器兼容； 3.less样式，可对代码稍做修改，实现换肤功能； 4.启动需要用Nginx
支持文件拖拽上传，直接将文件拖拽到页面元素上方即可自动上传（默认元素是body）；服务端采用asp.net 4.0程序开发，包含有处理程序，提供程序和视图控件,当然也可以用java或者php实现服务端程序。 浏览器兼容：IE10...
拖动效果的实现基本都是dom操作来实现的，通过拖动分隔线，计算分隔线与浏览器边框的距离(left)，来实现拖动之后的不同宽度的计算；当拖动分隔线1时，计算元素框left和mid；当拖动分隔线2时，计算元素框mid和right；...
在工作当中，我们会常常见到像UC浏览器的新选项卡一样的可以自定义拖拽摆放效果。大的像淘宝的装修，QQ空间装扮等，小到一些游戏等等随处可见拖放的使用场景。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放...
需要依靠mousedown、mousemove、mouseup等API，通过大量的JS代码来实现,而如今html5大大简化了网页元素的拖放操作编程难度,API除了支持浏览器内部元素的拖放外，同时支持浏览器和其它应用程序之间的数据互相拖动
更改窗口尺寸, 就是对元素被鼠标左键按下后做处理, 发送消息 拖拽窗口这个之前已经实现了, 这是最基本的. 不然还怎么愉快的玩wke 阴影面积, 这些是我自己觉得合适做的. 如果觉得不好看自己做一个. 主要是分享这...