jQuery verwendet den Drag-Effekt, um das freie Ziehen von div_jquery zu realisieren

Ich habe versehentlich einen einfachen Div-Drag-Effekt gesehen, den ich geändert und einige Kommentare hinzugefügt habe. Nach dem Test hat er Firefox/Chrome/IE6-11 perfekt bestanden.

Lassen Sie uns zunächst über die Umsetzungsprinzipien und Kernpunkte sprechen. Die wichtigsten sind drei Schritte. Der erste Schritt ist das Mousedown-Ereignis. Wenn die Maus gedrückt wird, werden die X-Achse und die Y-Achse der Maus sowie der linke und obere Rand des Drag-Boxs aufgezeichnet und der Drag-Markierung der Wert true zugewiesen , was bedeutet, dass die Ziehaktion bereit ist. Der zweite Schritt ist das Mousemove-Ereignis. Zu diesem Zeitpunkt werden die X-Achse und die Y-Achse der Maus dynamisch ermittelt und anschließend die neue linke und obere Kante des Drag-Boxs berechnet und zugewiesen, um den Drag-Effekt zu erzielen. Der dritte Schritt ist das Mouseup-Ereignis. Wenn die Maus nach oben springt, wird dem Drag-Flag der Wert false zugewiesen und die Drag-Aktion wird abgeschlossen.

Der HTML-Code lautet wie folgt:

<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-Code lautet wie folgt:

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

Schließlich ist es notwendig, die Auswahl von Inhalten vor Beginn des Ziehvorgangs zu verhindern, da sonst der Zieheffekt beeinträchtigt wird. Firefox und Chrome können über CSS eingestellt werden: {-moz-user-select: none; -webkit-user-select: none;} IE kann auch einen onselectstart="return false" direkt in HTML schreiben, aber es scheint, dass Chrome Ich war etwas betroffen, also habe ich beschlossen, diese Schreibmethode abzubrechen und dann ein onselectstart-Ereignis in js für den IE-Browser zu schreiben.

Dieses kleine Plug-In implementiert einfach den Drag-and-Drop-Effekt, ist aber gut kompatibel und erfordert auch einige Kenntnisse und Fähigkeiten. Natürlich können Sie dieses Plug-In oder die darin enthaltenen Ideen auch verwenden, um es weiter zu erweitern und ein vollständigeres Drag-and-Drop-Plug-In zu schreiben (z. B. Draggable and Droppable).

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.