DIV拖拽

 1     window.onload = function() {
 2         var oDiv = document.getElementById("div1");
 3         var disX = 0;
 4         var disY = 0;
 5
 6         oDiv.onmousedown = function(ev) {
 7             var oEvent = ev || event;
 8
 9             //记录鼠标相对DIV的距离
10             disX = oEvent.clientX - oDiv.offsetLeft;
11             disY = oEvent.clientY - oDiv.offsetTop;
12
13             document.onmousemove = function(ev) {
14                 var oEvent = ev || event;
15                 var l = oEvent.clientX - disX;
16                 var t = oEvent.clientY - disY;
17
18                 //防止DIV移除到浏览器外面
19                 if (l < 0) {
20                     l = 0;
21                 } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
22                     l = document.documentElement.clientWidth - oDiv.offsetWidth;
23                 }
24
25                 if (t < 0) {
26                     t = 0;
27                 } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
28                     t = document.documentElement.clientHeight - oDiv.offsetHeight;
29                 }
30
31                 oDiv.style.left = l + "px";
32                 oDiv.style.top = t + "px";
33             }
34
35             document.onmouseup = function() {
36                 document.onmousemove = null;
37             }
38
39             //兼容FF
40             return false;
41         };
42     };
时间: 2024-10-01 03:34:39

DIV拖拽的相关文章

Jquery实现div拖拽

Jquery实现div拖拽 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script type="text/javascript"

Html Div 拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css"&g

纯js实现DIV拖拽

写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但发现这段代码使用前必须设置top和left样式属性,否则拖动时div会有跳动,而且不支持多个div的拖动.于是对代码大概修改了一番,贴在这里,以备后用,希望大神勿怪. var startDrag = function(bar, target, callback) { (function(bar, target

原生js实现div拖拽+按下鼠标计时

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body{ height:1200px; background-color: azure; } #drag{ background-color: cornflowerblue; border: 1px solid black; position: absolute; width: 200px; height

原生js实现div拖拽

十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body{ height:1200px; background-color: azure; } #drag{ background-color: cornflowerblue; border: 1px solid black; position: absolute; width: 100p

案例:简易的Div拖拽

鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedown.onmousemove.onmouseup) 解决问题: 1.拖拽过程中,鼠标容易滑出Div区块: 2.防止Div拖出页面:修正位置: 3.解除绑定事件:鼠标左键抬起后,Div不再随着鼠标移动而发生位置变化: <!DOCTYPE html> <html lang="zh-CN"> &l

HTML5实现div拖拽

<!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" con

html5+javascript div拖拽

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5-Drag-Demo by 顽Shi</title> <style> .column { height: 200px; width: 200px; float: left; border: 1px solid black; background-color: green; m

跟随鼠标指针跑的div拖拽效果

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #div1 { height:100px; w