프론트 엔드 개발 중에 드래그 앤 드롭 효과가 사용되는 곳이 많이 있습니다. 물론 http://jqueryui.com/draggable/는 좋은 선택이지만 캐서롤을 깨고 진실을 물어 보는 사람입니다. JS와 비슷한 플러그인을 구현하는 데 시간이 걸렸으므로 많이 말하지 않을 것입니다.
첫째 : HTML 및 CSS
코드 사본은 다음과 같습니다.
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<제목> </title>
<스타일>
* {
여백 : 0;
패딩 : 0;
}
#div1 {
위치 : 절대;
너비 : 100px;
높이 : 100px;
커서 : 이동;
배경색 : 빨간색;
}
</스타일>
</head>
<body>
<div id = "div1">
</div>
</body>
</html>
이제 먼저 기본 알고리즘을 구현하십시오.
코드 사본은 다음과 같습니다.
<cript>
Window.onload = function () {
// 드래그 해야하는 div를 가져옵니다
var div1 = document.getElementById ( "div1");
// 마우스 프레스 이벤트를 추가합니다
div1.onmousedown = function (evt) {
var oevent = evt || 이벤트;
// 마우스를 누르는 것부터 왼쪽 상단까지의 거리를 얻습니다.
var distionx = oevent.clientx -div1.offsetleft;
var distiney = oevent.clientx -div1.offsettop;
// 문서 슬라이딩 시간을 추가합니다
document.onmouseMove = function (evt) {
var oevent = evt || 이벤트;
// div의 왼쪽 최고 값을 다시 계산합니다
var left = oevent.clientx -distonex;
var top = oevent.clienty -distony;
// 0보다 적거나 같은 경우 왼쪽으로 DIV가 문서에서 끌리는 것을 방지하기 위해 0으로 설정
if (왼쪽 <= 0) {
왼쪽 = 0;
}
// 왼쪽이 문서의 오른쪽 경계를 초과하면 오른쪽 경계로 설정됩니다.
else if (left> = documentElement.clientWidth -div1.offsetWidth) {
왼쪽 = document.documentElement.clientWidth -div1.OffSetWidth;
}
if (top <= 0) {
상단 = 0;
}
else if (top> = documentElement.clientHeight -div1.offsetheight) {
top = document.documentElement.clientHeight -div1.offsetheight;
}
// DIV를 다시 할당합니다
div1.style.top = top + "px";
div1.style.left = left + "px";
}
// 마우스 리프트 이벤트를 추가합니다
div1.onmouseup = function () {
// 이벤트를 지우십시오
document.onmouseMove = null;
div1.onmouseup = null;
}
}
}
</스크립트>
예, 객체 지향 구현을 사용하십시오
코드 사본은 다음과 같습니다.
<스타일>
* {
여백 : 0;
패딩 : 0;
}
#div1 {
너비 : 100px;
높이 : 100px;
배경색 : 빨간색;
}
#div2 {
배경색 : 노란색;
너비 : 100px;
높이 : 100px;
}
</스타일>
<div id = "div1"> </div>
<div id = "div2"> </div>
JS Draggle 클래스 :
코드 사본은 다음과 같습니다.
함수 드래그 (id) {
this.div = document.getElementById (id);
if (this.div) {
this.div.style.cursor = "Move";
this.div.style.position = "절대";
}
this.disx = 0;
this.disy = 0;
var _this = this;
this.div.onmousedown = function (evt) {
_this.getDistance (evt);
document.onmouseMove = function (evt) {
_this.SetPosition (EVT);
}
_this.div.onmouseup = function () {
_this.clearevent ();
}
}
}
drag.prototype.getDistance = function (evt) {
var oevent = evt || 이벤트;
this.disx = oevent.clientx- this.div.offsetleft;
this.disy = oevent.clienty- this.div.offsettop;
}
drag.prototype.setposition = function (evt) {
var oevent = evt || 이벤트;
var l = oevent.clientx- this.disx;
var t = oevent.clienty- this.disy;
if (l <= 0) {
l = 0;
}
else if (l> = documentElement.clientWidth- this.div.offsetWidth) {
l = document.documentElement.clientWidth- this.div.offsetWidth;
}
if (t <= 0) {
t = 0;
}
else if (t> = document.DocumentElement.clientHeight- this.div.offSetheight) {
t = document.documentElement.clientHeight- this.div.offsetheight;
}
this.div.style.left = l + "px";
this.div.style.top = t + "px";
}
drag.prototype.clearevent = function () {
this.div.onmouseup = null;
document.onmouseMove = null;
}
마지막으로 : 최종 구현 :
코드 사본은 다음과 같습니다.
Window.onload = function () {
새로운 드래그 ( "div1");
새로운 드래그 ( "div2");
}
효과는 다음과 같습니다.
위는이 기사에 관한 것입니다. 모든 사람이 JavaScript를보다 능숙하게 마스터하는 것이 도움이되기를 바랍니다.