整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
看下效果图
1、给目标div增加鼠标按下事件，记录下div对象的位置（left,top)和鼠标点击的位置（x,y)
2、监听鼠标移动事件，在移动过程中计算出鼠标的移动位置（nx,xy),然后实时计算出鼠标从点击到现在的偏移量，然后再将div的位置修改，这样就实现了div位置的变动
ps:目标div的属性position要设置absolute或者relative
3、div可以移动了，但什么时候停止移动呢？当然是鼠标弹起的时候，所以我们监听鼠标弹起的事件，并结束移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>div-drag-每天一个知识点</title>
<style>
.dragable {
width: 200px;
height: 200px;
border: 1px solid darkorchid;
position: relative;
}
</style>
</head>
<body>
<div class="dragable"></div>
</body>
<script>
var dragDiv=document.querySelector(".dragable");
dragDiv.addEventListener("mousedown", function(e) {
//获取div初始位置对象
var divRect=dragDiv.getBoundingClientRect();
//获取鼠标点击的位置
var downX=e.clientX;
var downY=e.clientY;
//开关打开
var startMove=true;
//设置样式为移动光标
dragDiv.style.cursor="move";
window.onmousemove=function(e) {
if (!startMove) {
return;
}
let newLeft=e.clientX - downX + divRect.left;
let newTop=e.clientY - downY + divRect.top;
dragDiv.style.left=newLeft + "px";
dragDiv.style.top=newTop + "px";
return false;
};
window.onmouseup=function(e) {
//结束移动
startMove=false;
dragDiv.style.cursor="default";
return false;
};
e.stopPropagation();
});
</script>
</html>
代码手敲可运行
当然这个实现还有很多可扩展或者不足，比如怎么限制div移动的范围，能力有限，在以后的日子里会尝试编写js组件，实现更完善的功能。
lt;!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>transitionend事件</title>
<style>
/*为div设置宽高、背景色及过渡*/
#myDIV {
width: 50px;
height: 50px;
background: orange;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#myDIV:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p>将鼠标移动到div元素上，查看过渡效果。</p>
<div id="myDIV"></div>
<script>
// Safari 3.1 到 6.0 版本代码
var dom=document.getElementById("myDIV");
dom.addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
dom.addEventListener("transitionend", myFunction);
// 事件回调函数
function myFunction() {
this.innerHTML='过渡效果结束';
this.style.background='red';
}
</script>
</body>
</html>
文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考，具体如下：
一、Js代码：
onload=function () {
//初始化
scrollToLocation();
};
function scrollToLocation() {
var mainContainer=$('#thisMainPanel'),
scrollToContainer=mainContainer.find('.son-panel:last');//滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
//scrollToContainer=mainContainer.find('.son-panel:eq(5)');//滚动到<div id="thisMainPanel">中类名为son-panel的第六个处
//非动画效果
//mainContainer.scrollTop(
// scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
//);
//动画效果
mainContainer.animate({
scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
}, 2000);//2秒滑动到指定位置
}
二、Html代码：
<div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">
<div class="son-panel">我是类容区域-1</div>
<div class="son-panel">我是类容区域-2</div>
<div class="son-panel">我是类容区域-3</div>
<div class="son-panel">我是类容区域-4</div>
<div class="son-panel" style="height:160px;">我是类容区域-5</div>
<div class="son-panel">我是类容区域-6</div>
<div class="son-panel">我是类容区域-7</div>
<div class="son-panel">我是类容区域-8</div>
</div>
三. 相关知识
javascript中制作滚动代码的常用属性
1.网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
2.假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。
例如：
<div id=”tool”>
<input type=”button” value=”提交”>
<input type=”button” value=”重置”>
</div>
“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。
以上属性在 FireFox 中也有效。
3.offsetTop 与 style.top 的区别
预备知识：offsetTop、offsetLeft、offsetWidth、offsetHeight
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
(1)offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
(2)offsetTop 只读，而 style.top 可读写。
(3)如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
offsetWidth与style.width属性的区别在于：如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
4.scrollLeft :
对象的最左边到对象在当前窗口显示的范围内的左边的距离．
即是在出现了横向滚动条的情况下，滚动条拉动的距离．
scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
*请认真填写需求信息，我们会在24小时内与您取得联系。
