jquery는 모든 주류 브라우저와 호환되는 간단한 드래그 앤 드롭 효과 예제를 구현합니다(최적화)_jquery

이전 글과 비교하여 드래그 앤 드롭 효과가 최적화되었습니다.
js 코드: fun.js

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

_MoveObj = null ;//현재 div를 나타내는 데 사용되는 모든 변수
z_index = 0; //Z 방향
jQuery.fn.myDrag=function(){
_IsMove = 0; 이동 1. 이동
_MouseLeft = 0; //div 왼쪽 좌표
_MouseTop = 0; //div 상단 좌표
$(document).bind("mousemove",function(e){
if(_IsMove== 1){
$(_MoveObj).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop})
}
}).bind(" mouseup",function( ){
_IsMove=0;
$(_MoveObj).removeClass("downMouse");
});
return $(this).bind("mousedown", function(e){
_IsMove=1;
_MoveObj = this;
var offset =$(this).offset()
_MouseLeft = e.pageX - offset.left; _MouseTop = e.pageY - offset.top;
_MoveObj.style.zIndex=z_index;
$(_MoveObj).addClass("downMouse")
}


html 코드:

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

<제목>demo. htm



text/javascript">
$(function(){
$(".myDiv").myDrag();
//$("#myDiv2").myDrag();
})

🎜>

드래그 2

드래그 3

드래그 4

드래그 5

div id= "myDiv6" class="myDiv">드래그 6

/html> ;