<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.nav {
height: 30px;
background-color: lemonchiffon;
line-height: 30px;
padding-left: 30px;
}
.nav a {
text-align: center;
font-size: 14px;
text-decoration: none;
color: #000;
}
.d-box {
width: 400px;
height: 300px;
border: 5px solid #ccc;
box-shadow: 2px #666;
position: absolute;
top: 40%;
left: 40%;
}
.hd {
width: 100%;
height: 25px;
background-color: #777;
line-height: 25px;
color: #fff;
cursor: move;
}
#box_close {
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 顶部注册信息 -->
<div class="nav">
<a href="javascript:;" id="register">注册信息</a>
</div> <!-- 可以移动的对话框 -->
<div class="d-box" id="d_box">
<div class="hd" id="drop">
<i>注册信息 (可以拖拽)</i>
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div> <script src="animate.js" charset="utf-8"></script>
<script type="text/javascript">
var box = document.getElementById("d_box");
var drop = document.getElementById("drop");
//先按下,在移动触动此事件
drop.onmousedown = function(event){
//获取鼠标在盒子中的坐标,将来移动的时候减去保证鼠标在盒子的指定位置
event = event || window.event; var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
var x = pagex - box.offsetLeft;
var y = pagey - box.offsetTop; document.onmousemove = function(event){
//把鼠标的坐标赋值给对话框。
event = event || window.event;
var xx = event.pageX || scroll().left + event.clientX;
var yy = event.pageY || scroll().top + event.clientY;
//二次操作鼠标位置
targetx = xx - x;
targety = yy - y;
//给box赋值
box.style.left = targetx + "px";
box.style.top = targety + "px";
//禁止文本选中(选中后取消)
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
//事件解绑
drop.onmouseup = function(){
document.onmousemove = null;
}
</script>
</body>
</html>

javascript 拖拽事件的更多相关文章

  1. day52—JavaScript拖拽事件的应用(自定义滚动条)

    转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...

  2. 每日分享!~ JavaScript(拖拽事件)

    浏览器的拖拉事件 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...

  3. javascript拖拽事件

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  4. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  5. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Javascript 拖拽的一些高级的应用——逐行分析代码,让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  7. Javascript 拖拽的一些简单的应用——逐行分析代码,让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  8. Javascript 拖拽雏形中的一些问题——逐行分析代码,让你轻松了解拖拽的原理

    今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...

  9. 完美实现鼠标拖拽事件,解决各种小bug,基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

随机推荐

  1. 数据字典生成工具之旅(8):SQL查询表的约束默认值等信息

    上一篇代码生成工具里面已经用到了读取表结构的SQL,这篇将更加详细的介绍SQL SERVER常用的几张系统表和视图! 阅读目录 系统表视图介绍 实际应用 本章总结 工具源代码下载 学习使用 回到顶部 ...

  2. 14、Silverlight 滤镜到 UWP 滤镜的移植(二)

    上一篇文章 大致介绍了,移植戴震军大哥的 Windows Phone7 中,对于高斯模糊滤镜的移植,主要是 int[] 数组和 byte[] 数组的互相转换.同样的思路,只要把前文的方法封装一下,就能 ...

  3. 使用ASIHttoRequest需要导入的framework

    需要导入如下framework libxml2.2.dylib libz.1.2.5.dylib MobileCoreServices.framework SystemConfiguration.fr ...

  4. jQuery EasyUI 数字框(NumberBox)用法

    这里的options是选项,可以参考下表: 选项名 类型 描述 默认值 min 数字 文本框中可允许的最小值 null max 数字 文本框中可允许的最大值 null precision 数字 最高可 ...

  5. bzoj 3879 虚树

    题目大意: 给一个字符串,多次询问k个后缀,求它们两两间LCP长度总和 分析: 转化为后缀树,用虚树求 注意: 后缀树中代表后缀的点都是叶子节点 题目中取模并没有卵用 #include <cst ...

  6. grep与正则表达式基础

    目录 grep 正则表达式 grep用法简介 我们介绍GREP的用法,主要用于匹配行,我们借助下面的正则表达式来介绍如何使用grep,还有就是正则表达式在linux中是极为重要的一部分. 命令:gre ...

  7. 自定义BaseServlet利用反射

    比较完美一点的BaseServlet package com.yangwei.mvc.servlet; import java.io.IOException; import java.lang.ref ...

  8. 谈谈调用腾讯云【OCR-通用印刷体识别】Api踩的坑

    一.写在前面 最近做项目需要用到识别图片中文字的功能,本来用的Tesseract这个写的,不过效果不是很理想. 随后上网搜了一下OCR接口,就准备使用腾讯云.百度的OCR接口试一下效果.不过这个腾讯云 ...

  9. JAVA_SE基础——39.继承

    在面向对象程序设计中,可以从已有的类派生出新类. 这称做继承(inheritance). 白话解释: 例子1:继承一般是指晚辈从父辈那里继承财产,也可以说是子女拥有父母给予他们的东西. 例子2:猫和狗 ...

  10. linux mail操作

    本操作系统邮件由来,crontab定时任务执行推送产生. 1.查看有多少封邮件 & file 2.我们直接键入23935来访问这封mail,看看是否是我们所需要的最新邮件. 3. 退出邮件查看 ...