javascript - 一个实现拖拽效果的js小demo报错的问题
本文介绍了javascript - 一个实现拖拽效果的js小demo报错的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
跟着网上的这篇教程做的一个拖拽效果,教程传送门
但是在chrome里运行时总是报错:
先贴上代码:
myDragDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyDragDemo</title>
<style type="text/css">
#box{
position : absolute;
left : 100px;
top : 100px;
padding : 5px;
background : lightblue;
font-size : 15px;
-moz-box-shadow : 2px 2px 4px grey;
-webkit-box-shadow : 2px 2px 4px grey;
}
#main{
border : 2px solid green;
background: yellowgreen;
}
#bar{
line-height : 30px;
background : purple;
border-bottom : 2px solid pink;
padding-left : 5px;
cursor : move;
}
#content{
width: 400px;
height: 150px;
padding: 10px 5px;
}
</style>
<script type="text/javascript" src = './myMovePlugin.js'></script>
<script type="text/javascript">
var obar = document.getElementById('bar');
var oTarget = document.getElementById('box');
myDrag(obar,oTarget);
</script>
</head>
<body>
<div id="box">
<div id="main">
<div id="bar">Drag</div>
<div id="content">Content</div>
</div>
</div>
</body>
</html>myMovePlugin.js:
var params = {
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
};
var getCss = function(o, key) {
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};
var myDrag = function(bar, target) {
params.left = getCss(bar,'left');
params.top = getCss(bar,'top');
bar.onmousedown = function (e) {
params.flag = true;
if (!e) {
e = window.event;
}
//防止IE文字被选中
bar.onselectstart = function () {
return false
}
var e = event;
params.currentX = e.ClientX;
params.currentY = e.ClientY;
};
bar.onmouseup = function (e) {
params.flag = false;
params.left = getCss(bar,'left');
params.top = getCss(bar,'top');
};
bar.onmousemove = function (e) {
var e = event? event : window.event;
if (params.flag) {
var nowX = e.ClientX, nowY = e.ClientY;
var disX = nowX - params.currentX, disY = nowY - params.currentY;
target.style.left = parseInt(params.left) + disX + 'px';
target.style.top = parseInt(params.top) + disY + 'px';
}
}
}
我对比了下，代码应该和教程里面的一样，没有什么问题呀，为什么教程里的可以正常执行，我的就会报错呢？谁能帮我看看么？感谢哦=￣ω￣=
解决方案
html稍作调整：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyDragDemo</title>
<style type="text/css">
#box{
position : absolute;
left : 100px;
top : 100px;
padding : 5px;
background : lightblue;
font-size : 15px;
-moz-box-shadow : 2px 2px 4px grey;
-webkit-box-shadow : 2px 2px 4px grey;
}
#main{
border : 2px solid green;
background: yellowgreen;
}
#bar{
line-height : 30px;
background : purple;
border-bottom : 2px solid pink;
padding-left : 5px;
cursor : move;
}
#content{
width: 400px;
height: 150px;
padding: 10px 5px;
}
</style>
</head>
<body>
<div id="box">
<div id="main">
<div id="bar">Drag</div>
<div id="content">Content</div>
</div>
</div>
<script type="text/javascript" src = './myMovePlugin.js'></script>
<script type="text/javascript">
var obar = document.getElementById('bar');
var oTarget = document.getElementById('box');
myDrag(obar,oTarget);
</script>
</body>
</html>这篇关于javascript - 一个实现拖拽效果的js小demo报错的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
