js 鼠标拖拽效果实现
效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>速表拖拽效果实现</title>
<style>
*{
margin: 0;
padding: 0;
}
.toolbar{
height: 30px;
text-align: left;
padding-left: 20px;
background: #036663;
line-height: 30px;
color: #fff;
}
.regist{
width: 410px;
height: 310px;
margin: 200px auto;
border:5px solid #eee;
box-shadow:2px 2px 2px 2px #666; }
.rt{
height: 26px;
background: #7C9299;
color: #fff;
line-height: 26px;
cursor: move;
}
.rts{
float: right;
}
</style>
</head>
<body>
<div class="toolbar">注册信息</div>
<div class="regist" id="regist">
<div class="rt" id="rt">
<span>注册信息(可以拖拽)</span>
<span class="rts">【关闭】</span>
</div>
</div>
<script>
var regist = document.getElementById("regist");
var rt = document.getElementById("rt");
var x = 0,y = 0;
rt.onmousedown = function(event){
var event = event || window.event;
x = event.clientX - regist.offsetLeft;
y = event.clientY - regist.offsetTop + 30;//加三十是因为顶部工具条占了30，而regist的没有父亲，所以他是以body为定位点，所以。。。
document.onmousemove = function(event){
var event = event || window.event;
regist.style.marginLeft = event.clientX - x +"px";
regist.style.marginTop = event.clientY - y +"px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</body>
</html>
js 鼠标拖拽效果实现的更多相关文章
- JS实现拖拽效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- 用JavaScript实现div的鼠标拖拽效果
实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...
- js鼠标拖拽
html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...
- JavaScript：鼠标拖拽效果
(之前的那个模板方法模式实在没搞懂...等几天再去研究8) 预览效果: 限制拖动范围在视口内.调整窗口时自动居中... <!DOCTYPE html> <html lang=&quo ...
- js 鼠标拖拽元素
基础知识 event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event. ...
- 原生js实现拖拽效果
面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...
- 【转】JS容器拖拽效果，并通过cookie保存拖拽各容器的所在位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS移动客户端--触屏滑动事件及js手机拖拽效果
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- Jquery实现鼠标拖拽效果
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...
随机推荐
- IIS7日志中时间与系统时间不一致的原因
最近在分析web日志,发现IIS7日志中时间与系统时间不一致,即本该上班时间才产生的产并发访问日志,全部发生在凌晨至上班前. 本以为是系统时间设置错误,检查后一切正常.后查询资料,原来是这个原因: 日 ...
- Git回滚到历史节点(SourceTree篇)
转自:http://blog.csdn.net/u010416101/article/details/78142697.https://www.zhihu.com/question/48178380 ...
- tyvj P3737 逐个击破
http://tyvj.cn/p/3737 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 秉承伟大军事家的战略思想,作为一个有智慧的军长你,遇到了一个类似的 ...
- wireshark问题
上一篇wireshark编译成功了,生成了相应的wireshark.exe,dumpcap.exe等可执行文件(这些文件都是可以运行的),编译工具用的是VS2010,但是新生成的文件和文件夹中没有找到 ...
- ngix 创建新的网站
1. 进入ngix 的目录的conf 目录 的 vhosts 2. 复制一份新的v2.edc.com.conf 3. server_name : v2.edc.com root : /ali/... ...
- 第02章 查询DSL进阶
本章内容 Lucene默认评分公式是如何工作的. 什么是查询重写. 查询二次评分是如何工作的. 如何在单次请求中实现批量准实时读取操作. 如何在单次请求中发送多个查询. 如何对包括嵌套文档和多值字段的 ...
- PyCharm社区版+Django搭建web开发环境-1
PyCharm开源社区版不像商业版那样可以直接通过Django来创建项目,必须通过以下几个步骤进行: 1. 创建项目:在cmd命令行下输入:django-admin startproject Demo ...
- Android-获取网络图片设置壁纸
下载图片,设置壁纸 的代码: package liudeli.async; import android.app.Activity; import android.app.ProgressDialog ...
- [LeetCode 题解] Combination Sum
前言 [LeetCode 题解]系列传送门: http://www.cnblogs.com/double-win/category/573499.html 1.题目描述 Given a se ...
- 简单的jquery左侧导航栏和页面选中
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...