간결한drag효과,div를 자유롭게 끌어당기는 실현 및 주의점

우연히 이전에 한 간결한div 드래그 효과를 보았습니다. 주석을 수정하고 테스트를 통해 Firefox/chrome/ie6-11을 완벽하게 통과했습니다.
먼저 실현 원리와 요점을 말하자면, 가장 중요한 것은 세 가지다.첫 번째 단계는mousedown 이벤트입니다. 마우스mousedown을 마우스로 눌렀을 때 마우스 X축과 Y축, 드래그 상자의left와 top를 기록하고 드래그 표시에true를 부여합니다. 드래그 동작이 준비되었음을 의미합니다.두 번째 단계는mousemove 이벤트입니다. 마우스의 X축과 Y축을 동적으로 가져와 드래그 상자에 새로운left와 top를 계산하고 드래그 효과를 냅니다.세 번째 단계는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와 크롬은 css를 통해 설정할 수 있습니다: {-moz-user-select: none;-webkit-user-select: none;},ie는 원래 html에 onselectstart = "return false"를 직접 쓸 수도 있지만 크롬이 영향을 받은 것 같아서 이 쓰기를 취소하고 js에서 i 브라우저에 onselectstart 이벤트를 쓰기로 결정했습니다.
이 작은 플러그인은 드래그 효과만 간단하게 실현할 수 있지만 호환성이 좋아서 지식과 기교도 사용되었다.물론 이 플러그인이나 그 안의 사상을 빌려 계속 확장하여 비교적 완벽한 드래그 플러그인(예를 들어 Draggable와 Droppable)을 쓸 수도 있다.