jQuery는 드래그 효과를 사용하여 자유로운 드래그를 실현합니다.

저번에 만들었던 간단한 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)을 계속 확장하고 작성할 수도 있습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.