ES6 쓰기 드래그
1554 단어 ES6
<link rel="stylesheet" type="text/css" href="drag.css"/>
<div id="div1">div1</div>
<div id="div2">div2</div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"/>
<script type="text/javascript">
class Drag {
constructor(id) {
this.oDiv = document.querySelector(id);
this.disX = 0;
this.disY = 0;
this.init();
}
init() {
console.log(this)
console.log(this.oDiv)
this.oDiv.onmousedown = function(ev) {
console.log('onmousedown')
// div
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
document.onmousemove = this.fnMove.bind(this);
document.onmouseup = this.fnUp.bind(this);
//
return false;
}.bind(this);
}
fnMove(ev) {
this.oDiv.style.left = ev.clientX - this.disX + 'px';
this.oDiv.style.top = ev.clientY - this.disY + 'px';
}
fnUp() {
document.onmousemove = null;
document.onmouseup = null;
}
}
new Drag('#div1')
// limitDrag drag ，
class limitDrag extends Drag {
fnMove(ev) {
super.fnMove(ev);
//
if(this.oDiv.offsetLeft < 0) {
this.oDiv.style.left = 0;
}
if(this.oDiv.offsetTop < 0) {
this.oDiv.style.top = 0;
}
}
}
new limitDrag('#div2')
</script>
</code></pre>
<p> </p>
</div>
</div>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
(Javascript) ES6의 주요 특징 정리let을 사용하면 선언한 변수는 블록안에서만 유효하게 된다. const 역시 마찬가지로 블록스코프를 따른다 .const 와 let의 차이점은 const 는 상수로 값을 할당한다는 점이다. 따라서 값을 변경시키려고 하...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
