javascript拖拽事件
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#a{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
}
</style>
</head>
<body>
<div id='a'></div>
<script type="text/javascript">
a.onmousedown=function(e){
var ev=e||event
var l=ev.clientX -this.offsetLeft;
var t=ev.clientY -this.offsetTop;
document.onmousemove=function(e){
var ev=e||event
a.style.left=ev.clientX-l+'px';
a.style.top=ev.clientY-t+'px'
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmousedown=null; }
return false;
} </script>
</body>
</html>
javascript拖拽事件的更多相关文章
- day52—JavaScript拖拽事件的应用（自定义滚动条）
转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...
- javascript 拖拽事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 每日分享！～ JavaScript(拖拽事件）
浏览器的拖拉事件 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...
- day50—JavaScript鼠标拖拽事件
转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
- Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理
今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...
- Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理
今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...
- 完美实现鼠标拖拽事件，解决各种小bug，基于jquery
鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...
随机推荐
- 【转】Rails中Bootstrap的安装和使用
转自:http://blog.csdn.net/lissdy/article/details/9195651 眼看着前端攻城师们都开始使用Bootstrap创作网页,于是也想学着在最近正在学习的 ...
- 使用cython把python编译so
1.需求 为了保证线上代码安全和效率,使用python编写代码,pyc可直接反编译,于是把重要代码编译so文件 2.工作 2.1 安装相关库: pip install cython yum insta ...
- 部署和调优 1.5 vsftp部署和优化-1
系统自带的ftp服务软件.vsftpd 安装vsftpd yum install -y vsftpd 启动vsftpd /etc/init.d/vsftpd start 如果启动失败,可能是端口被占用 ...
- js面试题知识点全解(一作用域)
问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用 知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ ...
- Python_pip_01_pip的相关操作
>Python中的pip是什么?能够做些什么? pip是Python中的一个进行包管理的东西,能够下载包.安装包.卸载包......一些列操作 >怎么查看pip的相关信息 在控制台输入: ...
- SQL serve 数据库--视图、事物、分离附加、备份还原
视图是数据库中的一种虚拟表,与真实的表一样,视图包含一系列带有名称的行和列数据.行和列数据用来自定义视图的查询所引用的表,并且在引用视图时动态生成. 视图只能用来查询,不能增删改:不允许出现重复列 ...
- 用批处理，批量安装字体文件 (Erector.bat)
@echo off color 0A title 字体安装器 Powered by Cheney_Yang cls xcopy /y "Fonts\*.ttf" "%wi ...
- 使用jar打war包或解压war包
进入Dos命令行,并到目标文件夹,如C:\Temp,待打包的内容在C:\Temp\Blog里,目标,把Blog里的相应文件打成war报 1.打包 C:\Temp\jar -cvf Blog.war . ...
- matlab 修改文件夹下所有文件名大写为小写
1. path = './DIR/';Files = dir(fullfile(path,'*.m'));LengthFiles = length(Files);for count_i = 1 : L ...
- Linux expect命令
一.简介 通过Shell可以实现简单的控制流功能,但是对于需要交互的场合则必须通过人工来干预,有时候我们可能会需要实现和交互程序如telnet服务器等进行交互的功能.而就使用来实现这种功能的工具.Ex ...