work_javascript 기술을 위해 작성해야 하는 js 드래그 앤 드롭 구성 요소

코드 복사 코드는 다음과 같습니다.

/*
*사용법:
* var d = new Drag({id:'dragPannel',maxLeft:500,maxTop:200});
* d.ready();
*참고:
* 왼쪽 및 위쪽 스타일 드래그 객체는 스타일 속성으로 작성되어야 합니다.
*
*/
//호출자를 수정하세요. newObj의 메서드로 fn을 호출합니다.
function RepairCaller(newObj, fn){
return function(){
return fn.apply(newObj, 인수)
}
}
function Drag( config ){
this.moveTarget = T.dom.get( config.id );
this.startLeft =parseInt(this.moveTarget.style.left); //드래그가 시작될 때마다 왼쪽 드래그된 객체의 상단
this.startTop = parsInt(this.moveTarget.style.top);
this.startClientX = this.startLeft; //드래그 시작 시 이벤트의 clientX, clientY를 저장합니다.
this.startClientY = this.startTop;
this.MAX_LEFT = config.maxLeft||document.documentElement.clientWidth - this.moveTarget.offsetWidth; //요소가 이동할 수 있는 최대 범위
this.MAX_TOP = config .maxTop||document.documentElement.clientHeight - this.moveTarget.offsetHeight;
this.lock = true;
}
Drag.prototype.ready = function(){
//Bind 이벤트
T.bind(document, "mousedown", RepairCaller(this,this.down))
T.bind(document, "mousemove", RepairCaller(this, this.move))
T .bind(document, "mouseup", RepairCaller(this,this.stop));
}
Drag.prototype.down = function(){
//이벤트 객체 가져오기
var event = T.event.getEvent(arguments[0]),
target = T.event.getTarget(event);
if (target == this.moveTarget){
this.lock = false; 🎜 >//이벤트 시작 시 다양한 좌표 위치 저장
this.startLeft =parseInt(this.moveTarget.style.left);
this.startTop =parseInt(this.moveTarget.style.top);
this.startClientX = event.clientX;
this.startClientY = event.clientY;
}
}
Drag.prototype.move = function(){
if(! this.lock ){
//이벤트 객체 가져오기
var event = T.event.getEvent(arguments[0]),
target = T.event.getTarget(event)
if (target = = this.moveTarget){
//선택 내용이 있으면 지우기
//window.getSelection? window.getSelection().removeAllRanges(): document.selection.empty(); 🎜>// 드래그 범위가 최대 제한을 초과하는지 확인
var realLeft = this.startLeft event.clientX - this.startClientX, //실제 이동 범위
realTop = this.startTop event.clientY - this.startClientY ,
rightLeft, rightTop; //왼쪽, 위쪽 값 수정
rightLeft = realLeft > this.MAX_LEFT : ( realLeft > 0 ? realLeft : 0 ); this .MAX_TOP ? this.MAX_TOP : ( realTop > 0 ? realTop : 0 )
this.moveTarget.style.left = rightLeft "px"
rightTop "px" ;
}
else{
this.lock = true
}
}
Drag.prototype.stop = function(){
this. lock = true
};


추첨:
작성 과정에서 주의해야 할 몇 가지 사항은 다음과 같습니다.
1. 드래그 레이어는 스타일에 작성해야 합니다

2. 이동 중에 왼쪽과 위쪽을 단위로 설정하세요. 그렇지 않으면 작동하지 않습니다
3. 다중 레벨 div를 중첩할 때 over-flow:hidden을 추가해야 합니다. 상위 div에 스타일
완료!