Quelques applications simples du glisser-déposer Javascript (analysez le code ligne par ligne, vous permettant de comprendre facilement les principes du glisser-déposer)_Compétences Javascript

Aujourd'hui, nous allons voir comment empêcher l'objet déplacé d'être retiré d'un certain div et la fonction d'adsorption par glissement

Comme mentionné la dernière fois, notre glisser ne peut pas être retiré de la zone visuelle. Sur cette base, nous ajoutons un div parent pour éviter qu'il ne soit retiré du parent. Le principe est le même que précédemment, simple.

code html :

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

      </div>
    </div>

code css :

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

code javascript :

<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>

Le rendu est le suivant :

Faites simple.

La prochaine étape consiste à savoir comment le faire absorber automatiquement.

En fait, tout le monde l'utilisera souvent. Par exemple, lorsqu'il y a une petite fenêtre dans PS et qu'elle est déplacée vers le bord de la page, elle s'y adsorbe automatiquement.

Comment notre glisser-déposer peut-il avoir une telle fonction ?

Ceci est d'ailleurs mentionné précédemment lorsque l'on parle d'exercice. Tout comme prendre un taxi, vous ne pouvez pas demander au chauffeur de s'arrêter exactement là où vous le souhaitez. Il doit s'arrêter quelque part à proximité de la destination.

La procédure est la même, il suffit d'attribuer directement la valeur lorsqu'elle y est presque. Supposons que lorsque l'objet que je fais glisser est à 50 pixels de la gauche, je pense qu'il a atteint la gauche, puis attribuez-lui une valeur de 0, et il s'y collera automatiquement.

Le principe est très simple, voyons comment le code l'implémente. Apportez juste quelques modifications

<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>

La prochaine fois, nous parlerons d'applications avancées, qui seront plus responsables et utiles. Notre fonctionnalité glisser-déposer a été améliorée.

Par exemple, faire glisser des images et sélectionner du texte. Par exemple, notre page glisser-déposer actuelle n'a qu'un seul div, que nous ne rencontrerons jamais dans un développement normal.

En fait, lorsqu'il y a quelque chose sur la page, quels problèmes vont survenir avec ce glisser-déposer ? ? ?

Ce sera résolu la prochaine fois ~ S'il vous plaît, attendez-le avec impatience