JavaScript:鼠标拖曳效果

样式：

<style>body {margin: 0}.box {width: 400px;height: 300px;border: 5px solid #eee;box-shadow: 2px 2px 2px 2px #666;position: absolute;top: 30%;left: 30%}.hd {width: 100%;height: 25px;background-color: #7c9299;border-bottom: 1px solid #369;line-height: 25px;color: #fff;cursor: move}#box_close {float: right;cursor: pointer}</style>

<body><div id="box" class="box"><div id="drop" class="hd">注册信息 (可以拖拽)<span id="box_close">【关闭】</span></div><div class="bd"></div></div><script>// 获取被拖动的盒子和拖动条var box = document.getElementById('box');var drop = document.getElementById('drop');drop.onmousedown = function (event) {          // 鼠标在拖动条上 按下 可拖动盒子  var event = event || window.event;// 获取鼠标按下时的位置var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;// 计算鼠标按下的位置 距 盒子的位置var spaceX = pageX - box.offsetLeft;var spaceY = pageY - box.offsetTop;document.onmousemove = function (event) {    // 鼠标移动的时候 获取鼠标的位置 整个盒子跟着鼠标的位置走var event = event || window.event;// 获取移动后鼠标的位置var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;// 计算并设置盒子移动后的位置box.style.left = pageX - spaceX + 'px';box.style.top = pageY - spaceY + 'px';// 清理鼠标拖动时，选中拖动条中文字的情况window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();};};document.onmouseup = function () {// 释放鼠标按键时  取消盒子的移动 document.onmousemove = null;};</script>
</body>

运行效果：

JavaScript:鼠标拖曳效果相关推荐

最简洁的js鼠标拖曳效果【原】
请原谅我是一个标题档,不过还是很简洁的,因为只是初步的实现的拖曳效果 <!DOCTYPE html> <html> <head> <meta http ...
鼠标移动div效果：鼠标拖曳效果
通过简单的鼠标事件,获取实时的鼠标坐标,和实时的div坐标,实现鼠标对div的拖曳效果. 注意事项: 1.event监听事件:有同步性,信息的一种及时交互. 2.获取鼠标实时坐标的三种方法:clien ...
js之鼠标的拖曳效果
js之鼠标的拖曳效果效果如下: 下面是代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
JS实现QQ面板-拖曳效果
实现的功能是将整个QQ面板在特定区域点击鼠标按下移动,面板会随着光标移动而移动,这可以称为鼠标跟随效果,也叫拖曳效果. 首先是确定HTML结构,定义一个父元素模拟整个QQ面板,设置标题区域用于JS选中 ...
JavaScript实现一串div跟随鼠标移动效果（幻影效果）
JavaScript实现一串div跟随鼠标移动效果上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果.现在来讲一个进阶版,实现一串div跟随鼠标移动效果,鼠标幻影效果.如图: ...
html鼠标拖尾效果,JavaScript鼠标划过背景拖尾效果
JavaScript鼠标划过残影效果 body{ margin:0px; padding:0px; background-color:#000; } .container a{ display:inl ...
自定义html页面鼠标右键,javascript鼠标右键菜单自定义效果
本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下效果图: 具体代码: #menu{ border:solid 1px gray; width:100px; ...
鼠标跟随效果html,javascript 鼠标跟随特效代码及理解
javascript 鼠标跟随特效 *{ margin: 0; padding: 0; } body{ height: 1000px; } div{ width: 50px; height: 50px ...
js 实现鼠标拖曳div
js 实现拖曳的3个事件,点击时鼠标按下(mousedown事件).移动时(mousemove事件).松开时(mouseup事件),既鼠标按下才能移动div,鼠标松开就不能再移动了. <!DOC ...

JavaScript:鼠标拖曳效果

JavaScript:鼠标拖曳效果相关推荐

最新文章

热门文章