dom 拖拽div
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
}
</style>
<script>
window.onload = function ()
{
var odiv = document.getElementById('div1'); odiv.onmousedown = function (ev)
{
var ev = ev || event;
var dix = ev.clientX - this.offsetLeft;
var diy = ev.clientY - this.offsetTop;
document.onmousemove = function (ev)
{
var ev = ev || event;
odiv.style.top = ev.clientY - diy + 'px';
odiv.style.left =ev.clientX - dix + 'px';
} document.onmouseup = function ()
{
document.onmousedown = document.onmousemove = null;
}
}
}
</script>
</head> <body>
<div id="div1"></div>
</body>
</html>
dom 拖拽div的更多相关文章
- 简洁的drag效果，自由拖拽div的实现及注意点
偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...
- 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
- JS拖拽div（移动）
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- JS之scrollTop、offsetHeight和offsetTop等属性用法详解和拖拽div
标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法.先来看一张比较经典 ...
- 可拖拽div
在开发的时候需要一个可拖拽的prompt弹框.自己写了一个,大概思路为: 1.获取鼠标左键按下移动的起点坐标(x,y). 2.获取div的left和top属性. 3.得到鼠标坐标到左上角的距离(x-t ...
- 自由拖拽DIV实现
最近在做的项目有个效果是要实现div随意拖拽改变大小,前端框架选择的是vue.js,UI用的是element,拖拽效果可以很简单的实现,但是在拖拽过程中发现会对其他元素实现全选效果,因此最后选择使用元 ...
- 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）
效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...
- 拼图 canvas分割 dom拖拽 pc 移动端
参考:Canvas drag 实现拖拽拼图小游戏 参考的案例,不支持手机端.总结下实现过程中遇到的小坑. gitHub:https://github.com/WppFrontEnd/puzzle 大概 ...
- dom 拖拽回放
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- Linux Java 环境变量设置
对整个机器:所有用户 1,在/etc/profile 文件末尾加入 export JAVA_HOME=/var/opt/jdk1.7.0_04 export PATH=$JAVA_HOME/bin:$ ...
- hadoop hadoop-0.20.2-cdh3u4升级
[hadoop@lab02 ~]$ uname -aLinux lab02 2.6.18-194.el5 #1 SMP Tue Mar 16 21:52:39 EDT 2010 x86_64 x86_ ...
- Qt之等待提示框（QTimer）
简述 上节讲述了关于QPropertyAnimation实现等待提示框的显示,本节我们使用另外一种方案来实现-使用定时器QTimer,通过设置超时时间定时更新图标达到旋转效果. 简述 效果 资源 源码 ...
- 无线端通用的reset样式
@charset "utf-8"; html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, o ...
- 【C#学习笔记】网页弹出提示框
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- Android使用绘图Path总结
Path作为Android中一种相对复杂的绘图方式,官方文档中的有些解释并不是很好理解,这里作一个相对全面一些的总结,供日后查看,也分享给大家,共同进步. 1.基本绘图方法 addArc(RectF ...
- SQL注入常用语句
整形参数判断 1.直接加' 2.and 1=1 3. and 1=2 如果1.3运行异常 2正常就存在注入 字符型判断 1.直接加' 2.and '1'='1' 3. ...
- CURL --- 命令行浏览器CURL
CURL --- 命令行浏览器CURL CURL --- 命令行浏览器 CURL? 嗯,说来话长了~~~~ 这东西现在已经是苹果机上内置的命令行工具之一了,可见其魅力之一斑 1)二话不说,先从 ...
- 点击图片名,让图片在pictureBox中显示 z
public string filepath; public Form1() { InitializeComponent(); } private void button1_Click(object ...
- 网页元素定位神器之Xpath详解
摘要: 经常在工作中会使用到XPath的相关知识,但每次总会在一些关键的地方不记得或不太清楚,所以免不了每次总要查一些零碎的知识,感觉即很烦又浪费时间,所以对XPath归纳及总结一下. ... ...