南强小屋 Design By 杰米
一、JS 拖拽的实现实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>拖拽js</title>
<style type="text/css">
html, body {
overflow:hidden;
}
body, div, {
margin:0;
padding:0;
}
body {
color:#fff;
font:12px/2 Arial;
}
p {
padding:0 10px;
margin-top:10px;
}
span {
color:#ff0;
padding-left:5px;
}
#box {
position:absolute;
width:300px;
height:150px;
background:#D5CDDA;
border:2px solid #ccc;
top:150px;
left:400px;
margin:0;
}
#drag {
height:25px;
cursor:move;
background:#724a88;
border-bottom:2px solid #ccc;
padding:0 10px;
}
</style>
</head>
<body>
<div id="box">
<div id="drag">拖动区域</div>
被拖动的整个div
</div>
</body>
</html>
<script src="/UploadFiles/2021-04-02/jquery-1.10.1.min.js">https://www.jb51.net/article/93142.htm
效果图如下：
突然发现有没有效果图都一样哈哈，不说废话了，上代码：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>js拖拽效果</title>
<style type="text/css">
#div1 {
width : 200px;
height: 200px;
position: absolute;
background: #99dd33;
cursor: move;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
// js代码
</script>
</html>
js代码：
window.onload function() {
var disX = disY = 0; // 鼠标距离div的左距离和上距离
var div1 = document.getElementById("div1"); // 得到div1对象
// 鼠标按下div1时
div1.onmousedown = function(e) {
var evnt = e || event; // 得到鼠标事件
disX = evnt.clientX - div1.offsetLeft; // 鼠标横坐标 - div1的left
disY = evnt.clientY - div1.offsetTop; // 鼠标纵坐标 - div1的top
// 鼠标移动时
document.onmousemove = function(e) {
var evnt = e || event;
var x = evnt.clientX - disX;
var y = evnt.clientY - disY;
var window_width = document.documentElement.clientWidth - div1.offsetWidth;
var window_height = document.documentElement.clientHeight - div1.offsetHeight;
x = ( x < 0 ) "px";
div1.style.top = y + "px";
};
// 鼠标抬起时
document.onmouseup = function() {
document.onmousemove =null;
document.onmouup = null;
};
return false;
};
};
当然，这个虽然支持大部分浏览器，但是，我觉得div跟随鼠标的速度有点滞后，如果有好的解决办法请联系我喔，谢谢！
以上就是js实现拖拽的实例代码，有需要的小伙伴可以参考下,谢谢大家对本站的支持！
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无JavaScript 拖拽实例代码的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。