div 拖拽
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>divDrag</title>
<style>
#div1{
width: 300px;
height: 300px;
background-color: #ccc;
/*一定要绝对定位*/
position: absolute;
}
</style>
</head>
<body>
<div id="div1" class="box"></div>
<script src="drag.js"></script>
</body>
</html>
//js面向过程式写法
window.onload = function(){
var div1 = document.getElementById("div1");
div1.onmousedown = function(ev){
var oevent = ev || event;
var distanceX = oevent.clientX - div1.offsetLeft;
var distanceY = oevent.clientY - div1.offsetTop;
document.onmousemove = function(ev){
var oevent = ev || event;
div1.style.left = oevent.clientX - distanceX + 'px';
div1.style.top = oevent.clientY - distanceY + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
;
};
jquery
$('.box').mousedown(function(ev) {
var oevent = ev || event;
var distanceX = oevent.clientX - oevent.currentTarget.offsetLeft;
var distanceY = oevent.clientY - oevent.currentTarget.offsetTop;
$(document).mousemove(function(ev) {
var oevent = ev || event;
$('.box').css('left', oevent.clientX - distanceX + 'px');
$('.box').css('top', oevent.clientY - distanceY + 'px');
});
$(document).mouseup(function(ev) {
$(document).unbind('mousemove');
$(document).unbind('mouseup');
});
})
div 拖拽的更多相关文章
- 实现Div拖拽
直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...
- html之div拖拽，html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
- 运用DIV拖拽实现resize和碰撞检测
运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...
- 纯js实现DIV拖拽
写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
- 案例：简易的Div拖拽
案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...
- html --- javascript --- div --- 拖拽方块
当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...
- 原生js实现div拖拽+按下鼠标计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...
- 原生js实现div拖拽
十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- div拖拽缩放jquery插件编写——带8个控制点
项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...
- jquery实现div拖拽
1.引入jquery1.8.3 ,模块拖拽js代码: //模块拖拽 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(& ...
随机推荐
- windows环境jprofiler配置监控tomcat
1.点击jprofiler/bin/jprofiler.exe文件安装 2.安装后将C:\Users\Administrator\.jprofiler8\config.xml文件复制到指定文件下,如: ...
- Vue基础语法
一.挂载点,模版和实例 二.Vue实例中的数据,事件和方法 1.v-html指令和v-text指令 v-html :不转义 v-text :转义过后的内容 <div id="root& ...
- easyui提交form表单接受数据处理、
$('#Form').form('submit', { url:"withdrawal/bankAuthenticate4List.do", onSubmit: function( ...
- seata-server安装、运行（ubuntu）
seata-server为seata中的事务协调器. seata的wiki https://github.com/seata/seata/wiki/Home_Chinese 一.下载并安装 wget ...
- pyqt pyside 窗口自动调整大小
pyqt pyside 窗口自动调整大小 在QTimer中一直调整 def initTimer(self): self.resizeTimer = QtCore.QTimer(self) self.r ...
- Linux内核原理与分析-第一周作业
本科期间,学校开设过linux相关的课程,当时的学习方式主要以课堂听授为主.虽然老师也提供了相关的学习教材跟参考材料,但是整体学下来感觉收获并不是太大,现在回想起来,主要还是由于自己课下没有及时动手实 ...
- 初学Python的一些细节
一.python的数据类型 1.python的基本数据类型包括数值数据类型和字符串数据类型:基本数据类型的特点是不允许改变,如果改变基本数据类型的值,会导致内存的重新分配. int 整形 二进制 ...
- Android 常用知识点
1.Kotlin 将字节大小转换为KB,MB,GB 并保留两位小数 fun getFileSize(size: Long): String { var GB = 1024 * 1024 * 1024 ...
- python 字符串常用操作
字符串常用方法 capitalize() String.capitalize() 将字符串首字母变为大写 name = 'xiaoming' new_name = name.capitalize() ...
- Python数据分析基础PDF
Python数据分析基础(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1ImzS7Sy8TLlTshxcB8RhdA 提取码:6xeu 复制这段内容后打开百度网盘手 ...