> 웹 프론트엔드 > JS 튜토리얼 > jquery는 모든 주류 브라우저와 호환되는 간단한 드래그 앤 드롭 효과 예제를 구현합니다(최적화)_jquery

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

WBOY
풀어 주다: 2016-05-16 17:30:53
원래의
949명이 탐색했습니다.
이전 글과 비교하여 드래그 앤 드롭 효과가 최적화되었습니다.
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> ;



원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿