jQuery utilise l'effet de glisser pour réaliser un glissement gratuit div_jquery

J'ai accidentellement vu un simple effet de glisser div que j'avais créé auparavant. Je l'ai modifié et ajouté quelques commentaires. Après les tests, il a parfaitement réussi Firefox/chrome/ie6-11.

Parlons d’abord des principes de mise en œuvre et des points clés. Les plus importantes sont trois étapes. La première étape est l'événement mousedown Lorsque la souris est enfoncée, les axes X et Y de la souris ainsi que la gauche et le haut de la zone de déplacement sont enregistrés, et une valeur true est attribuée à la marque de déplacement. , ce qui signifie que l'action de glisser est prête. La deuxième étape est l'événement mousemove. À ce stade, les axes X et Y de la souris sont obtenus dynamiquement, puis les nouveaux côtés gauche et haut de la zone de déplacement sont calculés et attribués pour obtenir l'effet de déplacement. La troisième étape est l'événement mouseup Lorsque la souris rebondit, l'indicateur de déplacement se voit attribuer la valeur false et l'action de déplacement est terminée.

Le code html est le suivant :

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

le code js est le suivant :

(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头部
});

Enfin, il est nécessaire d'interdire la sélection de contenu avant de lancer l'action de glisser, sinon l'effet de glisser sera affecté. Firefox et Chrome peuvent être définis via CSS : {-moz-user-select: none; -webkit-user-select: none;} IE peut également écrire un onselectstart="return false" directement en HTML, mais il semble que Chrome. J'ai été un peu affecté, j'ai donc décidé d'annuler cette méthode d'écriture, puis d'écrire un événement onselectstart en js pour le navigateur IE.

Ce petit plug-in implémente simplement l'effet glisser-déposer, mais il a une bonne compatibilité et utilise également certaines connaissances et compétences. Bien sûr, vous pouvez également utiliser ce plug-in ou les idées qu'il contient pour continuer à développer et écrire un plug-in glisser-déposer plus complet (tel que Draggable et Droppable).

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.