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"% ...
随机推荐
- python时间处理详解-乾颐堂
1.获取当前时间的两种方法: import datetime,time now = time.strftime("%Y-%m-%d %H:%M:%S") print now now ...
- Python使用signal模块实现定时执行
在liunx系统中要想每隔一分钟执行一个命令,最普遍的方法就是crontab了,如果不想使用crontab,经同事指点在程序中可以用定时器实现这种功能,于是就开始摸索了,发现需要一些信号的知识... ...
- JS对象转URL参数(原生JS和jQuery两种方式)
转自:点击打开链接 现在的js框架将ajax请求封装得非常简单,例如下面: $.ajax({ type: "POST", url: "some.php", da ...
- JVM内存模型以及堆分配参数
程序计数器: 存放下一条要运行的指令:每个线程都必须用一个独立的程序计数器,用于记录下一条要运行的指令.程序计数器是一块线程私有的内存空间. JAVA虚拟机栈: 线程私有的内存空间,它保存方法的局部变 ...
- windows cmd命令相关知识和经验的碎片化记录
1.循环遍历当前文件夹下的所有*.dll文件,并打印其绝对路径和相对路径 ``` for /f "tokens=*" %%a in ('dir /s/b/a-d "*.d ...
- Ubuntu14.04下使用PPA安装php5.6，php7
1.为了使用ppa(Personal Package Archives) 选安装依赖: # apt-get install python-software-properties 2.添加不同版本php ...
- 使用word 2007 发布csdn博客
目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...
- 编写高质量代码改善C#程序的157个建议——建议138：事件和委托变量使用动词或形容词短语命名
建议138:事件和委托变量使用动词或形容词短语命名 事件和委托使用场景是调用某个方法,只不过这个方法由调用者赋值.这决定了对应的变量应该以动词或形容词短语命名. 关于事件和委托变量妥当的命名示例如下: ...
- 慎用WSACleanup()
中止Windows Sockets DLL的使用. #include <winsock.h> int PASCAL FAR WSACleanup ( voi ...
- SpringCloud教程 | 第三篇: 服务消费者（Feign）(Finchley版本)
上一篇文章,讲述了如何通过RestTemplate+Ribbon去消费服务,这篇文章主要讲述如何通过Feign去消费服务. 一.Feign简介 Feign是一个声明式的伪Http客户端,它使得写Htt ...