极客观点
项目管理
HarmonyOS
写个拖拽插件没有报错但是为什么拖动不了
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div1 {width: 100px; height: 100px; background: red; position: absolute;}
img1 { position: absolute;}
</style>
</head>
<body>
<div id="div1"></div>
<img src="1.jpg" id="img1" />
<script>
(function(window){
var Drog = function(config){
this._init(config);
};
Drog.prototype = {
_init:function(config){
// 使其指向 Drog
initEvents.call(this,config);
this.move(config)
},
move:function(obj) {
// console.log(typeof this.obj)
var obj = this.obj;
obj.onmousedown = (ev) => {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
if ( obj.setCapture ) {
obj.setCapture();
}
document.onmousemove = (ev) => {
var ev = ev || event;
var L = ev.clientX - disX;
var T = ev.clientY - disY;
if ( L < 0 ) {
L = 0;
} else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) {
L = document.documentElement.clientWidth - obj.offsetWidth;
}
if ( T < 0 ) {
T = 0;
} else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) {
T = document.documentElement.clientHeight - obj.offsetHeight;
}
obj.style.left = L + 'px';
obj.style.top = T + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false;
}
}
};
var initEvents = function(config){
this.obj = document.getElementById(config.oDiv)
// console.log(typeof this.obj)
};
window.Drog = Drog;
})(window)
var p = new Drog(
{
oDiv:'div1'
}
)
</script>
</body>
</html>
html5
改为
改为