저번에 만들었던 간단한 div 드래그 효과를 우연히 봤는데 수정해서 댓글을 좀 달았더니 firefox/chrome/ie6-11을 완벽하게 통과했네요.
먼저 구현 원칙과 핵심 사항에 대해 이야기해 보겠습니다. 가장 중요한 것은 세 가지 단계입니다. 첫 번째 단계는 mousedown 이벤트입니다. 마우스가 down되면 마우스의 X축, Y축과 드래그 상자의 왼쪽 및 위쪽이 기록되고 드래그 표시에 true 값이 할당됩니다. , 이는 드래그 작업이 준비되었음을 의미합니다. 두 번째 단계는 mousemove 이벤트입니다. 이때 마우스의 X축과 Y축을 동적으로 얻은 다음 드래그 상자의 새로운 왼쪽과 위쪽을 계산하고 할당하여 드래그 효과를 얻습니다. 세 번째 단계는 mouseup 이벤트입니다. 마우스가 튀어오르면 드래그 플래그에 false 값이 할당되고 드래그 작업이 완료됩니다.
html 코드는 다음과 같습니다.
<div class="divWrap" id="move1" style="width: 200px; height: 200px; background: Green; border: 1px solid red; position: absolute; top: 100px; left: 100px; cursor: move; -moz-user-select: none; -webkit-user-select: none;"></div> <div class="divWrap" style="width: 200px; height: 200px; background: brown; border: 1px solid red; position: absolute; top: 300px; left: 100px;"> <h3 id="move2" style="height: 45px; line-height: 45px; font-size: 18px; background: red; margin: 0; cursor: move; -moz-user-select: none; -webkit-user-select: none;">Title--Move</h3> </div>
js 코드는 다음과 같습니다.
(function($) { $.fn.dragDiv = function(divWrap) { return this.each(function() { var $divMove = $(this);//鼠标可拖拽区域 var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove;//整个移动区域 var mX = 0, mY = 0;//定义鼠标X轴Y轴 var dX = 0, dY = 0;//定义div左、上位置 var isDown = false;//mousedown标记 if(document.attachEvent) {//ie的事件监听,拖拽div时禁止选中内容,firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none; $divMove[0].attachEvent('onselectstart', function() { return false; }); } $divMove.mousedown(function(event) { var event = event || window.event; mX = event.clientX; mY = event.clientY; dX = $divWrap.offset().left; dY = $divWrap.offset().top; isDown = true;//鼠标拖拽启动 }); $(document).mousemove(function(event) { var event = event || window.event; var x = event.clientX;//鼠标滑动时的X轴 var y = event.clientY;//鼠标滑动时的Y轴 if(isDown) { $divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div动态位置赋值 } }); $divMove.mouseup(function() { isDown = false;//鼠标拖拽结束 }); }); }; })(jQuery); // $(document).ready(function() { $("#move1").dragDiv();//拖拽整个div $("#move2").dragDiv(".divWrap");//拖拽div头部 });
마지막으로 드래그 작업을 시작하기 전에 콘텐츠 선택을 금지해야 합니다. 그렇지 않으면 드래그 효과가 영향을 받습니다. Firefox와 Chrome은 CSS: {-moz-user-select: none; -webkit-user-select: none;}를 통해 설정할 수 있습니다. IE는 HTML에서 직접 onselectstart="return false"를 작성할 수도 있지만 Chrome에서는 조금 영향을 받았기 때문에 이 작성 방법을 취소하고 IE 브라우저용 js에 onselectstart 이벤트를 작성하기로 결정했습니다.
이 작은 플러그인은 단순히 드래그 앤 드롭 효과를 구현하지만 호환성이 좋고 약간의 지식과 기술도 사용합니다. 물론 이 플러그인이나 내부 아이디어를 사용하여 더 완전한 드래그 앤 드롭 플러그인(예: Draggable 및 Droppable)을 계속 확장하고 작성할 수도 있습니다.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.