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"% ...
随机推荐
- SqlServer——字符串处理函数
1) ASCII Format:ASCII ( character_expression ) Function:返回表达式最左端字符的ASCII值. eg: select ASCII('abcdef' ...
- 由浅到深理解ROS（5）- launch启动文件的理解与编写
ROS提供了一个同时启动节点管理器(master)和多个节点的途径,即使用启动文件(launch file).事实上,在ROS功能包中,启动文件的使用是非常普遍的.任何包含两个或两个以上节点的系统都可 ...
- Linux安装设置VNC远程桌面
1,先检查一下服务器是否已经安装了VNC服务,没有安装,检查服务器的是否安装VNC的命令如下[root@linuxidc rpms]# ps -eaf|grep vncroot 1789 ...
- 面向对象的JavaScript-004
1. // Below is an example of how to use Object.create() to achieve classical inheritance. This is fo ...
- Greeplum 系列（三） 基本用法
Greeplum 系列(三) 基本用法 <PostgreSQL 教程>:https://www.yiibai.com/postgresql 一.Greeplum 登陆与创建 1.1 登陆 ...
- Spring Data JPA初使用 *****重要********
Spring Data JPA初使用 我们都知道Spring是一个非常优秀的JavaEE整合框架,它尽可能的减少我们开发的工作量和难度. 在持久层的业务逻辑方面,Spring开源组织又给我们带来了同样 ...
- Smarty的循环
(1)section.sectionelse功能多,参数多.或许不是太实用.是smarty用来做循环操作的函数之一.(2)了解基本属性name和loop <section name=articl ...
- mybatis insert 自动生成key
<selectKey keyProperty="id" resultType="java.lang.String" order="BEFORE& ...
- 手机SLAM开发
...惯性定位 由简入繁 保留JPG文件. 回环 建模
- 编写高质量代码改善C#程序的157个建议——建议111：避免双向耦合
建议111:避免双向耦合 双向耦合是指两个类型之间相互引用.下面的代码是一种典型的双向耦合: class A { private B b; public void MethodA() { b.Meth ...