Javascript 드래그 앤 드롭의 몇 가지 간단한 응용 프로그램(코드를 한 줄씩 분석하여 드래그 앤 드롭의 원리를 쉽게 이해할 수 있음)_javascript 기술

오늘은 드래그한 개체가 특정 div에서 밖으로 드래그되는 것을 방지하는 방법과 드래그 흡착 기능에 대해 살펴보겠습니다

지난번에 언급했듯이 드래그를 시각적 영역 밖으로 드래그할 수 없습니다. 이를 바탕으로 상위 div를 추가하여 상위 영역 밖으로 드래그되는 것을 방지합니다. 원리는 이전과 동일하고 간단합니다.

html 코드:

<div id="div2">
      <div id="div1">

      </div>
    </div>

CSS 코드:

<style type="text/css">
      #div1 {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
      }
      #div2 {
        width: 400px;
        height: 300px;
        background: #CCCCCC;
        position: relative;
      }
    </style>

자바스크립트 코드:

<script type="text/javascript">
       // 拖拽空div 低版本的火狐有bug
      window.onload = function() {
        var oDiv = document.getElementById("div1");
        var oDiv2 = document.getElementById("div2");
        var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function(ev) {
          var oEvent = ev || event;
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;

          document.onmousemove = function(ev) {
            var oEvent = ev || event;
            // 存储div当前的位置
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;

            if (oDivLeft < 0) {
              oDivLeft = 0;
            } else if (oDivLeft > oDiv2.offsetWidth - oDiv.offsetWidth) {
              oDivLeft = oDiv2.offsetWidth - oDiv.offsetWidth;
            }

            if (oDivTop < 0) {
              oDivTop = 0;
            } else if (oDivTop > oDiv2.offsetHeight - oDiv.offsetHeight) {
              oDivTop = oDiv2.offsetHeight - oDiv.offsetHeight;
            }

            oDiv.style.left = oDivLeft + 'px';
            oDiv.style.top = oDivTop + 'px';
          };

          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
          return false; // 阻止默认事件,解决火狐的bug
        };
      };
    </script>

렌더링은 다음과 같습니다.

간단하게 유지하세요.

다음 단계는 자동으로 흡수되게 하는 방법입니다.

실제로 누구나 자주 사용하게 될 것입니다. 예를 들어 PS에 작은 창이 있는 경우 페이지 가장자리로 드래그하면 자동으로 흡착됩니다.

드래그 앤 드롭이 어떻게 그런 기능을 가질 수 있나요?

사실 앞서 운동 얘기를 할 때도 언급한 거지만, 택시를 탈 때와 마찬가지로 운전사에게 원하는 곳에 멈춰달라고 할 수는 없습니다.

방법은 동일합니다. 거의 다 왔을 때 직접 값을 할당하면 됩니다. 내가 드래그하는 객체가 왼쪽에서 50px일 때 왼쪽에 도달했다고 가정하고 값을 0으로 지정하면 자동으로 붙습니다.

원리는 매우 간단합니다. 코드에서 이를 어떻게 구현하는지 살펴보겠습니다. 몇 가지만 수정해 보세요

<script type="text/javascript">
      window.onload = function() {
        var oDiv = document.getElementById("div1");
        var oDiv2 = document.getElementById("div2");
        var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function(ev) {
          var oEvent = ev || event;
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;

          document.onmousemove = function(ev) {
            var oEvent = ev || event;
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;


            // 当left 小于50 就自动归0 这样实现吸附
            if (oDivLeft < 50) {
              oDivLeft = 0;
            } else if (oDivLeft > oDiv2.offsetWidth - oDiv.offsetWidth) {
              oDivLeft = oDiv2.offsetWidth - oDiv.offsetWidth;
            }

            if (oDivTop < 0) {
              oDivTop = 0;
            } else if (oDivTop > oDiv2.offsetHeight - oDiv.offsetHeight) {
              oDivTop = oDiv2.offsetHeight - oDiv.offsetHeight;
            }

            oDiv.style.left = oDivLeft + 'px';
            oDiv.style.top = oDivTop + 'px';
          };

          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
          return false; 
        };
      };
    </script>

다음번에는 더욱 책임감 있고 유용한 고급 애플리케이션에 대해 이야기하겠습니다. 드래그 앤 드롭 기능이 개선되었습니다.

예를 들어 사진을 드래그하고 텍스트를 선택합니다. 예를 들어, 현재 드래그 앤 드롭 페이지에는 div가 하나만 있으며 일반 개발에서는 결코 볼 수 없습니다.

사실 페이지에 뭔가가 있을 때 이렇게 드래그 앤 드롭하면 어떤 문제가 발생할까요? ? ?

다음번에 해결되겠죠~기대해주세요