js修改div样式（js原生自定义拖拽组件）
js修改div样式（js原生自定义拖拽组件）
1.less包装页面* {
margin: 0;
padding: 0;
#wrap {
height: 100%;
overflow: hidden;
#drag-model {
position: absolute;
width: 100px;
height: 100px;
background: steelblue;
border: 5px solid sandybrown;
img {
width: 100px;
height: 100px;
}
}
#drag-effect {
//对元素进行位置操控，必须position
position: absolute;
width: 100px;
height: 100px;
background: tomato;
border: 5px solid sandybrown;
//这里的居中，拖拽会left 50%
// left: 50%;
// top: 50%;
// transform: translate3d(-50% -50% 0);
//这里的居中，left会增加100%
top: 10%;
left: 10%;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// margin: auto;
//transition: 2s;
text-align: center;
font: 20px/100px "微软雅黑";
color: white;
span {
position: absolute;
margin-top: 75%;
margin-left: -50%;
font: 12px "微软雅黑";
color: white;
}
&:hover {
background: steelblue;
}
}
}
}2.Js原生拖拽onmousedown命名函数
/* 拖拽：
* 1.initialPoint：获取元素初始化位置left(鼠标点击时)
* |-初始化鼠标点击点mousePoint(视口)
* 2.mouseMovePoint：获取鼠标移动left(视口)
* 3.确定鼠标移动后的位置：initialPoint currentPoint
* 4.鼠标移动的距离：mouseMovePoint-mousePoint=currentPoint
*/
$(function() {
var draggerNode = document.querySelector("#drag-model");
var effecterNode = document.querySelector("#drag-effect");
dragger(draggerNode true 50 effecterNode);
//1.拖拽节点 2.是否吸附范围控制 3.弹力吸附值 4.影响节点
function dragger(dragNode flag adsorbValue effectNode) {
var initialPoint = {
x: 0
y: 0
};
var mousePoint = {
x: 0
y: 0
};
//弹力吸附默认值
adsorbDefaultValue=10;
//限制范围
flagLimit=true;
dragNode.onmousedown = function(e) {
//视口e.client(x y)
e = e || event;
//1.获取元素初始化位置
//this为实践监听点-dragNode 视口dragNode.offsetLeft/top(x y)
initialPoint.x = this.offsetLeft;
initialPoint.y = this.offsetTop;
//2.鼠标初始点点击时位置
mousePoint.x = e.clientX;
mousePoint.y = e.clientY;
//判断浏览器：是否有全局捕获
if(this.setCapture) {
this.setCapture();
}
//整个文档视口捕获事件，不可以使用dragNode
document.onmousemove = function(e) {
e = e || event;
//移动时：视口位置e.client(x y)
var mouseMovePoint = {
x: 0
y: 0
};
mouseMovePoint.x = e.clientX;
mouseMovePoint.y = e.clientY;
//当前移动位置-距离
var currentPoint = {
x: 0
y: 0
};
currentPoint.x = mouseMovePoint.x - mousePoint.x;
currentPoint.y = mouseMovePoint.y - mousePoint.y;
//坐标限制
limitCurrentPoint = {
x: 0
y: 0
};
limitCurrentPoint.x = initialPoint.x currentPoint.x;
limitCurrentPoint.y = initialPoint.y currentPoint.y;
//判断执行磁力吸附
flag=flagLimit===false?false:true;
if(flagLimit){
//如果有value则修改默认值
if(adsorbValue){
adsorbDefaultValue=adsorbValue;
}
//判断是否有弹力吸附
if(adsorbDefaultValue) {
//if(limitCurrentPoint.x<0) 添加磁性吸附，需要更改最小值
if(limitCurrentPoint.x < adsorbDefaultValue) {
limitCurrentPoint.x = 0;
}
if(limitCurrentPoint.y < adsorbDefaultValue) {
limitCurrentPoint.y = 0;
}
//如果超出视口
if(limitCurrentPoint.y > document.documentElement.clientHeight - dragNode.offsetHeight - adsorbDefaultValue) {
limitCurrentPoint.y = document.documentElement.clientHeight - dragNode.offsetHeight;
}
if(limitCurrentPoint.x > document.documentElement.clientWidth - dragNode.offsetWidth - adsorbDefaultValue) {
limitCurrentPoint.x = document.documentElement.clientWidth - dragNode.offsetWidth;
}
}
}
//drag元素开始移动
dragNode.style.left = limitCurrentPoint.x "px";
dragNode.style.top = limitCurrentPoint.y "px";
//判断是否存在effectNode
if(effectNode) {
//碰撞检测覆盖
//1.dragnode节点
var dragTop = dragNode.offsetTop;
var dragLeft = dragNode.offsetLeft;
var dragRight = dragNode.offsetLeft dragNode.offsetWidth;
var dragBottom = dragNode.offsetTop dragNode.offsetHeight;
//2.影响节点：effectNode的left
var effectTop = effectNode.offsetTop;
var effectLeft = effectNode.offsetLeft;
var effectRight = effectNode.offsetLeft effectNode.offsetWidth;
var effectBottom = effectNode.offsetTop effectNode.offsetHeight;
//3.判断坐标
if(dragRight < effectLeft || dragBottom < effectTop || dragLeft > effectRight || dragTop > effectBottom) {
//没有移动到，可更换图片 imgNode.src=""
effectNode.style.fontSize = "20px";
} else {
effectNode.style.fontSize = "50px";
}
}
}
//鼠标抬起，清空事件
document.onmouseup = function() {
document.onmouseup = document.onmousemove = null;
if(document.releaseCapture) {
document.releaseCapture();
}
}
//避免浏览器默认事件触发，改变left。这个方法无法禁止IE8
return false;
/*使用全局捕获
* element.setCapture：处理mousedown事件，全部鼠标事件重定向到这个元素，直到鼠标被释放或者document.releaseCapture
* releaseCapture：如果启用了鼠标捕获，则生成释放事件
* 谷歌：没有全局捕获
* 火狐：有全局捕获定义，但没有实际作用
* IE：有全局捕获，有作用
*/
}
};
})3.原js函数调用拖拽，html调用js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no" />
<title>js原生拖拽组件</title>
</head>
<link rel="stylesheet" href="css/dragger-module.css" />
<body>
<div id="wrap">
<div id="drag-model">
<img src="img/my-logo-2.png" />
</div>
<div id="drag-effect">拖拽控件
<span>一刀coder</span>
</div>
</div>
</body>
<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="js/dragger-module.js"></script>
</html>
1234567891011121314151617181920212223243.优化生成拖拽组件js
/* 拖拽：
* 1.initialPoint：获取元素初始化位置left(鼠标点击时)
* |-初始化鼠标点击点mousePoint(视口)
* 2.mouseMovePoint：获取鼠标移动left(视口)
* 3.确定鼠标移动后的位置：initialPoint currentPoint
* 4.鼠标移动的距离：mouseMovePoint-mousePoint=currentPoint
*/
//函数自调用
(function(w) {
w.drag = {};
drag.dragger = //1.拖拽节点 2.是否吸附范围控制 3.弹力吸附值 4.影响节点
function dragger(dragNode flag adsorbValue effectNode) {
var initialPoint = {
x: 0
y: 0
};
var mousePoint = {
x: 0
y: 0
};
//弹力吸附默认值
adsorbDefaultValue = 10;
//限制范围
flagLimit = true;
dragNode.onmousedown = function(e) {
//视口e.client(x y)
e = e || event;
//1.获取元素初始化位置
//this为实践监听点-dragNode 视口dragNode.offsetLeft/top(x y)
initialPoint.x = this.offsetLeft;
initialPoint.y = this.offsetTop;
//2.鼠标初始点点击时位置
mousePoint.x = e.clientX;
mousePoint.y = e.clientY;
//判断浏览器：是否有全局捕获
if(this.setCapture) {
this.setCapture();
}
//整个文档视口捕获事件，不可以使用dragNode
document.onmousemove = function(e) {
e = e || event;
//移动时：视口位置e.client(x y)
var mouseMovePoint = {
x: 0
y: 0
};
mouseMovePoint.x = e.clientX;
mouseMovePoint.y = e.clientY;
//当前移动位置-距离
var currentPoint = {
x: 0
y: 0
};
currentPoint.x = mouseMovePoint.x - mousePoint.x;
currentPoint.y = mouseMovePoint.y - mousePoint.y;
//坐标限制
limitCurrentPoint = {
x: 0
y: 0
};
limitCurrentPoint.x = initialPoint.x currentPoint.x;
limitCurrentPoint.y = initialPoint.y currentPoint.y;
//判断执行磁力吸附
flag = flagLimit === false ? false : true;
if(flagLimit) {
//如果有value则修改默认值
if(adsorbValue) {
adsorbDefaultValue = adsorbValue;
}
//判断是否有弹力吸附
if(adsorbDefaultValue) {
//if(limitCurrentPoint.x<0) 添加磁性吸附，需要更改最小值
if(limitCurrentPoint.x < adsorbDefaultValue) {
limitCurrentPoint.x = 0;
}
if(limitCurrentPoint.y < adsorbDefaultValue) {
limitCurrentPoint.y = 0;
}
//如果超出视口
if(limitCurrentPoint.y > document.documentElement.clientHeight - dragNode.offsetHeight - adsorbDefaultValue) {
limitCurrentPoint.y = document.documentElement.clientHeight - dragNode.offsetHeight;
}
if(limitCurrentPoint.x > document.documentElement.clientWidth - dragNode.offsetWidth - adsorbDefaultValue) {
limitCurrentPoint.x = document.documentElement.clientWidth - dragNode.offsetWidth;
}
}
}
//drag元素开始移动
dragNode.style.left = limitCurrentPoint.x "px";
dragNode.style.top = limitCurrentPoint.y "px";
//判断是否存在effectNode
if(effectNode) {
//碰撞检测覆盖
//1.dragnode节点
var dragTop = dragNode.offsetTop;
var dragLeft = dragNode.offsetLeft;
var dragRight = dragNode.offsetLeft dragNode.offsetWidth;
var dragBottom = dragNode.offsetTop dragNode.offsetHeight;
//2.影响节点：effectNode的left
var effectTop = effectNode.offsetTop;
var effectLeft = effectNode.offsetLeft;
var effectRight = effectNode.offsetLeft effectNode.offsetWidth;
var effectBottom = effectNode.offsetTop effectNode.offsetHeight;
//3.判断坐标
if(dragRight < effectLeft || dragBottom < effectTop || dragLeft > effectRight || dragTop > effectBottom) {
//没有移动到，可更换图片 imgNode.src=""
effectNode.style.fontSize = "20px";
} else {
effectNode.style.fontSize = "50px";
}
}
}
//鼠标抬起，清空事件
document.onmouseup = function() {
document.onmouseup = document.onmousemove = null;
if(document.releaseCapture) {
document.releaseCapture();
}
}
//避免浏览器默认事件触发，改变left。这个方法无法禁止IE8
return false;
/*使用全局捕获
* element.setCapture：处理mousedown事件，全部鼠标事件重定向到这个元素，直到鼠标被释放或者document.releaseCapture
* releaseCapture：如果启用了鼠标捕获，则生成释放事件
* 谷歌：没有全局捕获
* 火狐：有全局捕获定义，但没有实际作用
* IE：有全局捕获，有作用
*/
}
};
})(window);4…html调用组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no" />
<title>js原生拖拽组件</title>
</head>
<link rel="stylesheet" href="css/dragger-module.css" />
<body>
<div id="wrap">
<div id="drag-model">
<img src="img/my-logo-2.png" />
</div>
<div id="drag-effect">拖拽控件
<span>一刀coder</span>
</div>
</div>
</body>
<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="js/dragger-module.js"></script>
<script type="text/javascript">
$(function() {
var draggerNode = document.querySelector("#drag-model");
var effecterNode = document.querySelector("#drag-effect");
drag.dragger(draggerNode true 50 effecterNode);
})
</script>
</html>
1234567891011121314151617181920212223242526272829303132335.效果图
javascript
javascript
