JavaScript 드래그 앤 드롭 효과 code_javascript 기술-JS 튜토리얼-php.cn

이 프로그램의 프로토타입은 제가 이미지 자르기 효과를 할 때 만들어졌는데, 당시 muxrwc와 BlueDestiny에서 비슷한 효과들을 몇 가지 참고하고 많이 배웠습니다.
정리할 때마다 기분이 좋지만, 가끔씩 배운 지식처럼 개선할 수 있는 부분도 있고, 오류도 있는 부분이 있고, 실현해야 할 특정 요구 사항이 있다는 걸 발견하게 됩니다.
간단한 드래그 앤 드롭만 필요한 사람들이 있다는 점을 고려하여 쉽게 학습할 수 있도록 SimpleDrag의 단순화된 버전이 있습니다.
효과 미리보기
ps: maxthon에서 광고 필터링을 켜면 필터링될 가능성이 높습니다(피할 수 있는 방법이 있는지는 모르겠습니다).
프로그램 설명
[프로그램 원리]
여기에서는 SimpleDrag를 예로 들어 기본 원리를 설명합니다.
먼저 초기화 프로그램에 드래그 앤 드롭 개체가 필요합니다.

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

this.Drag = $(drag);

처음에 드래그 앤 드롭 개체를 기준으로 마우스 좌표를 기록하는 두 가지 매개 변수도 있습니다.

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

this._x = this._y = 0 ;

제거 이벤트를 추가하는 데 사용되는 두 가지 이벤트 개체 함수도 있습니다.

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

this._fM = BindAsEventListener (this, this.Move) 
this._fS = Bind(this, this.Stop) 

은 각각 끌기 프로그램과 끌기 중지 프로그램입니다.
드래그 앤 드롭 개체의 위치는 절대 위치여야 합니다.

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

this.Drag.style.position = "absolute";

마지막으로 드래그 앤 드롭 시작 프로그램을 드래그 앤 드롭 이벤트에 바인딩합니다. -drop object:
addEventHandler(this.Drag, "mousedown ", BindAsEventListener(this, this.Start))
드래그 앤 드롭 개체 위에서 마우스를 누르면 시작 프로그램이 트리거됩니다. . 주로 드래그를 준비하는 데 사용됩니다. 여기에는 드래그 앤 드롭 개체를 기준으로 한 마우스 좌표가 기록됩니다.

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

this._x = oEvent.clientX - this.Drag.offsetLeft 
this._y = oEvent.clientY - this.Drag.offsetTop ; 

그리고 _fM 끌기 프로그램과 _fS 중지 끌기 프로그램을 각각 문서의 mousemove 및 mouseup 이벤트에 바인딩합니다.

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

addEventHandler(document, "mousemove", this._fM ) 
addEventHandler(document, "mouseup", this._fS ); 

이벤트가 전체 창 문서에서 유효한지 확인하려면 이벤트를 문서에 바인딩해야 합니다. 드래그 앤 드롭 개체에만 바인딩하면 너무 빨리 드래그하여 터치에서 벗어나기 쉽습니다. .
문서 위에서 마우스를 움직이면 이동 프로그램이 실행됩니다. 드래그를 구현하는 프로그램은 다음과 같습니다.
드래그 앤 드롭 객체에 설정해야 하는 왼쪽 및 위쪽 값은 마우스의 현재 좌표값과 드래그 시작 시 마우스의 상대 좌표값의 차이로 얻을 수 있습니다.
이것 .Drag.style.left = oEvent.clientX - this._x "px";
this.Drag.style.top = oEvent.clientY - this._y "px"
드디어 마우스를 놓으면 드래그 앤 드롭을 종료하기 위해 중지 프로그램이 트리거됩니다.
여기서 주요 기능은 시작 프로그램에서 문서에 추가된 이벤트를 제거하는 것입니다.
removeEventHandler(document, "mousemove", this._fM)
removeEventHandler(document, "mouseup", this. _fS );
이런 간단한 드래그 앤 드롭 프로그램이 준비되어 있습니다.
【드래그 앤 드롭 잠금】
잠금에는 가로 잠금(LockX), 세로 잠금(LockY), 완전 잠금(Lock)의 세 가지 유형이 있습니다.
이건 비교적 간단합니다. 가로,세로 방향을 잠그려면 Move에서 잠겼는지 확인하고 왼쪽과 위쪽으로 설정하면 됩니다. 완전히 잠겼으면 바로 돌아가면 됩니다.
if(!this.LockX){ this.Drag.style.left = ; }
if(!this.LockY){ this.Drag.style.top = }
[트리거 개체]
트리거 개체는 프로그램의 Handle 속성을 통해 설정된 드래그 앤 드롭 프로그램을 트리거하는 데 사용됩니다. 트리거링에 드래그 앤 드롭 개체 전체를 사용할 필요가 없는 경우도 있습니다.
트리거 개체를 사용한 후에도 드래그 앤 드롭 개체는 계속 이동하지만 트리거 개체는 드래그 앤 드롭을 트리거하는 데 사용됩니다(일반적인 용도는 트리거 개체를 드래그 앤 드롭 개체에 넣는 것입니다).
ps: 트리거 객체의 또 다른 사용법은 동일한 핸들을 설정하여 하나의 트리거 객체로 여러 드래그 앤 드롭 객체를 동시에 드래그 앤 드롭하는 것입니다.
【범위 제한】
범위 제한을 설정하려면 먼저 제한을 true로 설정해야 합니다. 범위 제한에는 고정 범위 제한과 컨테이너 범위 제한 두 가지가 있으며 주로 Move 프로그램에서 설정합니다.
비교값이 범위를 초과할 경우 드래그 앤 드롭 개체가 설정 범위 내에 남을 수 있도록 왼쪽과 위쪽에 설정할 값을 수정하는 것이 원칙입니다.
[고정 범위 제한]
컨테이너 범위 제한은 위쪽, 아래쪽, 왼쪽, 오른쪽의 드래그 앤 드롭 범위를 지정하는 것입니다.
각 속성의 의미는 다음과 같습니다.
상단(mxTop): 상단 제한
하단(mxBottom): 상단 오프셋 높이 제한
왼쪽(mxLeft): 왼쪽 제한; ) : 왼쪽 offsetWidth 제한.
범위 설정이 올바르지 않으면 상하 또는 좌우가 동시에 범위를 초과할 수 있습니다. 프로그램에는 범위 매개변수를 수정하는 수리 프로그램이 있습니다.
복구 프로그램은 프로그램 초기화 및 시작 프로그램에서 실행됩니다. 복구 프로그램에서 mxRight 및 mxBottom을 수정합니다.
this.mxRight = Math.max(this.mxRight, this.mxLeft this.Drag.offsetWidth) ;
this.mxBottom = Math.max(this.mxBottom, this.mxTop this.Drag.offsetHeight)
여기서 mxLeft offsetWidth 및 mxTop offsetHeight는 각각 mxRight 및 mxBottom의 최소 범위 값입니다.
범위 매개변수에 따라 이동 매개변수를 수정합니다.
iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft)
iTop = Math.max(Math .min( iTop, mxBottom - this.Drag.offsetHeight), mxTop)
왼쪽 상단에는 더 큰 값을, 오른쪽 하단에는 더 작은 값을 취합니다.
【컨테이너 범위 제한】
컨테이너 범위 제한은 범위를 하나의 컨테이너_mxContainer로 제한하는 것을 의미합니다.
드래그 앤 드롭 개체는 _mxContainer에 포함되어야 합니다. 프로그램이 컨테이너 범위 제한을 설정하기 위해 상대 위치 지정을 사용하기 때문입니다(컨테이너 외부에 있는 경우 절대 위치 지정을 사용해야 하므로 더 번거롭습니다). ) 그리고 드래그 앤 드롭 개체보다 컨테이너 공간이 크기 때문에 이에 대해서는 설명할 필요가 없습니다.
범위 매개변수가 컨테이너의 속성에 따라 설정된다는 점을 제외하면 원리는 고정 범위 제한과 유사합니다.
컨테이너가 설정되면 복구 프로그램은 상대 위치 지정을 위해 위치를 자동으로 설정합니다.
!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || .style.position = "relative");
ps: CurrentStyle은 최종 스타일을 얻는 데 사용됩니다(자세한 내용은 여기에서 최종 스타일 섹션을 참조하세요).
프로그램 실행 전에 드래그 앤 드롭 개체의 왼쪽과 위쪽을 설정했지만 컨테이너를 상대로 설정하지 않은 경우 상대가 자동으로 설정될 때 이동이 발생하므로 프로그램은 복구를 실행합니다. 이런 상황을 방지하려면 초기화 중에 프로그램을 실행하세요. 정확한 값을 얻기 위해서는 상대값을 설정하기 전에 offsetLeft와 offsetTop을 얻어야 하므로 시작 프로그램에서 _x, _y를 설정하기 전에 Repair를 수행해야 합니다.
상대 위치 지정으로 인해 컨테이너 범위의 경우 범위 매개변수의 위쪽, 아래쪽, 왼쪽 및 오른쪽 값은 각각 0, clientHeight, 0, clientWidth입니다.
clientWidth 및 clientHeight는 컨테이너에서 표시되는 부분의 너비와 높이입니다(자세한 내용은 여기를 참조하세요).
为了容器范围能兼容固定范围的参数，程序中会获取容器范围和固定范围中范围更小的值：
Code
mxLeft = Math.max(mxLeft, 0);
mxTop = Math.max(mxTop, 0);
mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
因为设置相对定位的关系，容器_mxContainer设置过后一般不要取消或修改，否则很容易造成移位异常。
【鼠标捕获】
我在一个拖放实例中看到，即使鼠标移动到浏览器外面，拖放程序依然能够执行，仔细查看后发现是用了setCapture。
鼠标捕获(setCapture)是这个程序的重点，作用是将鼠标事件捕获到当前文档的指定的对象。这个对象会为当前应用程序或整个系统接收所有鼠标事件。
使用很简单：
this._Handle.setCapture();
setCapture捕获以下鼠标事件：onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout。
程序中主要是要捕获onmousemove和onmouseup事件。
msdn的介绍中还说到setCapture有一个bool参数，用来设置在容器内的鼠标事件是否都被容器捕获。
容器就是指调用setCapture的对象，大概意思就是：
参数为true时（默认）容器会捕获容器内所有对象的鼠标事件，即容器内的对象不会触发鼠标事件（跟容器外的对象一样）；
参数为false时容器不会捕获容器内对象的鼠标事件，即容器内的对象可以正常地触发事件和取消冒泡。
而对于容器外的鼠标事件无论参数是什么都会被捕获，可以用下面这个简单的例子测试一下（ie）：
Code

mouseover

点击div的背景会触发不了事件（点击边框或div里面的对象是可以触发的）。
到底什么时候会出现这个bug呢，再用下面的代码测试：
Code

测试代码中我把背景颜色（包括body）设成灰色，首先可以看出在蓝色div（测试对象）内只要触发点是在灰色上面，就能触发事件；相反，在其他不是背景的地方，即使是边框、图片，也不能触发事件。
就像是把灰色的背景的补到蓝色div上来，而且仅仅是背景能这样，多奇怪的设定啊。
这里要说明的是body比较特别，不管背景是不是透明，只要触发点是直接在body上就能触发事件。
我的结论是如果触发事件的对象背景是透明的，而事件的触发点不在对象内的元素上，也不是直接在body上，而且透明背景外没有非透明背景的话，那么事件触发就会失败。
这个结论写得不太好，因为我都不知改怎么表达这奇怪的设定，希望各位能明白。
ps：这里设置图片背景跟颜色背景效果是一样的。
那最好解决的方法就是给对象设一个非透明背景，但有时需求正好是要透明的，那怎么办呢？
首先想到的是加上背景色后设置完全透明，但这样连边框，容器内的对象等都完全透明了，不够好。
如果能保证触发点直接在body或非背景上也可以，如果这个也不能保证呢？
我想到的一个解决方法是在容器里面加一个层，覆盖整个容器，并设置背景色和完全透明：
Code
with(this._Handle.appendChild(document.createElement("div")).style){
width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)";
}
到这里又不得不说ie6的一个渲染bug，用下面的代码测试（ie6）：
Code

코드는 다음과 같습니다.

var isIE = (document.all) ? 사실 : 거짓; 
var $ = function (id) { 
return "string" == typeof id ? document.getElementById(id) : id; 
}; 
var Class = { 
create: function() { 
return function() { this.initialize.apply(this, 인수); } 
} 
} 
var Extend = function(destination, source) { 
for(소스의 var 속성) { 
destination[property] = source[property]; 
} 
} 
var Bind = function(object, fun) { 
return function() { 
return fun.apply(object, 인수); 
} 
} 
var BindAsEventListener = function(object, fun) { 
return function(event) { 
return fun.call(object, (event || window.event)); 
} 
} 
var CurrentStyle = function(element){ 
return element.currentStyle || document.defaultView.getCompulatedStyle(요소, null); 
} 
function addEventHandler(oTarget, sEventType, fnHandler) { 
if (oTarget.addEventListener) { 
oTarget.addEventListener(sEventType, fnHandler, false); 
} else if (oTarget.attachEvent) { 
oTarget.attachEvent("on" sEventType, fnHandler); 
} else { 
oTarget["on" sEventType] = fnHandler; 
} 
}; 
function RemoveEventHandler(oTarget, sEventType, fnHandler) { 
if (oTarget.removeEventListener) { 
oTarget.removeEventListener(sEventType, fnHandler, false); 
} else if (oTarget.detachEvent) { 
oTarget.detachEvent("on" sEventType, fnHandler); 
} else { 
oTarget["on" sEventType] = null; 
} 
}; 
//拖放程序 
var Drag = Class.create(); 
Drag.prototype = { 
//拖放对象 
initialize: function(drag, options) { 
this.Drag = $(drag);//拖放对象 
this. _x = this._y = 0;//记录鼠标상对拖放对象的位置 
this._marginLeft = this._marginTop = 0;//记录margin 
//事件对象(사용于绑定移除事件) 
this._fM = BindAsEventListener(this, this.Move); 
this._fS = 바인딩(this, this.Stop); 
this.SetOptions(옵션); 
this.Limit = !!this.options.Limit; 
this.mxLeft = parsInt(this.options.mxLeft); 
this.mxRight = parsInt(this.options.mxRight); 
this.mxTop = parsInt(this.options.mxTop); 
this.mxBottom = parsInt(this.options.mxBottom); 
this.LockX = !!this.options.LockX; 
this.LockY = !!this.options.LockY; 
this.Lock = !!this.options.Lock; 
this.onStart = this.options.onStart; 
this.onMove = this.options.onMove; 
this.onStop = this.options.onStop; 
this._Handle = $(this.options.Handle) || 이.드래그; 
this._mxContainer = $(this.options.mxContainer) || 널; 
this.Drag.style.position = "절대"; 
//透明 
if(isIE && !!this.options.Transparent){ 
//填充拖放对象 
with(this._Handle.appendChild(document.createElement("div") ).style){ 
너비 = 높이 = "100%"; 배경색 = "#fff"; 필터 = "알파(불투명도:0)"; 
} 
} 
//修正范围 
this.Repair(); 
addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start)); 
}, 
//设置默认属性 
SetOptions: function(options) { 
this.options = {//默认值 
Handle: "",//设置触发对象（不设置则使用拖放对象） 
한도: false,//是否设置范围限system(为true时下face参数有,可以是负数) 
mxLeft: 0,//左边限system 
mxRight: 9999, //右边限제 
mxTop: 0,//上边限제 
mxBottom: 9999,//下边限제 
mxContainer: "",//指定限aze 容器内 
LockX: false,//是否锁정수평방向拖放 
LockY: false,//是否锁定垂直方向拖放 
Lock: false,//是否锁정 
Transparent: false,//是否透明 
onStart: function( ){},//开始移动时执行 
onMove: function(){},//移动时执行 
onStop: function(){}//结束移动时执行 
}; 
확장(this.options, 옵션 || {}); 
}, 
//准备拖动 
시작: function(oEvent) { 
if(this.Lock){ return; } 
this.Repair(); 
//记录鼠标상처 
this._x = oEvent.clientX - this.Drag.offsetLeft; 
this._y = oEvent.clientY - this.Drag.offsetTop; 
//记录margin 
this._marginLeft =parseInt(CurrentStyle(this.Drag).marginLeft) || 0; 
this._marginTop = parsInt(CurrentStyle(this.Drag).marginTop) || 0; 
//mousemove时移动 mouseup时停止 
addEventHandler(document, "mousemove", this._fM); 
addEventHandler(document, "mouseup", this._fS); 
if(isIE){ 
//焦点丢失 
addEventHandler(this._Handle, "losecapture", this._fS); 
//设置鼠标捕获 
this._Handle.setCapture(); 
}else{ 
//焦点丢失 
addEventHandler(window, "blur", this._fS); 
//阻止默认动작곡 
oEvent.preventDefault(); 
}; 
//附加程序 
this.onStart(); 
}, 
//수정 범위
복구: function() { 
if(this.Limit){ 
//수정 오류 범위 매개변수
this.mxRight = Math.max(this.mxRight , this.mxLeft this.Drag.offsetWidth); 
this.mxBottom = Math.max(this.mxBottom, this.mxTop this.Drag.offsetHeight) 
//컨테이너가 있는 경우 위치는 다음과 같습니다. 상대 위치로 설정하고 오프셋을 가져오기 전에 
을 설정하세요!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || ; 
 } 
}, 
//드래그
이동: function(oEvent) { 
//잠겨 있는지 확인
if(this.Lock){ this.Stop( ); return; } ; 
//선택 취소
window.getSelection().removeAllRanges() : document.selection.empty()
var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y 
//범위 제한 설정
if(this.Limit){ 
//범위 매개변수 설정
var mxLeft = this.mxLeft , mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom; 
//컨테이너가 설정된 경우 범위 매개변수를 수정하세요. 
if(!!this._mxContainer) { 
mxLeft = Math.max(mxLeft, 0); 
mxTop = Math.max(mxTop, 0); 
mxRight = Math.min(mxRight, this._mxContainer.clientWidth); mxBottom = Math.min( mxBottom, this._mxContainer.clientHeight); 
}; 
//이동 매개변수 수정
iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag. offsetWidth), mxLeft); 
iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop) 
} 
//위치 및 올바른 여백 설정 
if(!this.LockX ){ this.Drag.style.left = iLeft - this._marginLeft "px" } 
if(!this.LockY){ this.Drag.style.top = iTop - 이. _marginTop "px"; } 
//추가 프로그램
this.onMove() 
}, 
//끌기 중지
Stop: function() { 
//이벤트 제거 
removeEventHandler( document, "mousemove", this._fM); 
removeEventHandler(document, "mouseup", this._fS) 
if(isIE){ 
removeEventHandler(this._Handle, " losscapture", this._fS); 
this._Handle.releaseCapture(); 
}else{ 
removeEventHandler(window, "blur", this._fS); 
}; 
/ /추가 프로그램
this.onStop(); 
} 
};

 
테스트 코드: 

코드

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

< ;/div>

🎜>
>
>

드래그 앤 드롭 상태: 시작되지 않음< ;/span>
< ;script>
var drag = new Drag("idDrag", { mxContainer: "idContainer", Handle: "idHandle", Limit: true,
onStart: function(){ $("idShow").innerHTML = "드래그 앤 드롭 시작" },
onMove: function(){ $("idShow").innerHTML = "left:" this.Drag.offsetLeft ";top:" this.Drag.offsetTop; },
onStop: function(){ $("idShow").innerHTML = "드래그 앤 드롭 종료"; }
}); onclick = function(){
drag .Limit = true;
drag.mxLeft = drag.mxTop = 0;
drag.mxRight = drag.mxBottom = 9999; LockY = drag.Lock = false;
}
$("idLock").onclick = function(){ drag.Lock = true }
$("idLockX").onclick = function() { drag.LockX = true; }
$("idLockY").onclick = function(){ drag.LockY = true; }
$("idLimit").onclick = function(){ drag.mxRight = drag.mxBottom = 200;drag.Limit = true; }
$("idLimitOff").onclick = function(){ drag.Limit = false }