Heim > Artikel > Web-Frontend > Wie implementiert man den Box-Drag-Effekt in JS? (mit Code)

Wie implementiert man den Box-Drag-Effekt in JS? (mit Code)

青灯夜游nach vorne: 2020-06-16 10:31:292976Durchsuche

Wie implementiert man den Box-Drag-Effekt in JS? In diesem Artikel erhalten Sie eine detaillierte Einführung in die JS-Methode zum Erzielen des Box-Drag-Effekts. Der Beispielcode im Artikel wird ausführlich vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

HTML-Code:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>拖拽</title>
<body>
  <p class="leftBox"></p>
  <p class="rightBox">
    <!-- 开启拖拽属性draggable -->    
    <p class="circle" draggable="true"></p>
  </p>
</body>
 
</html>

CSS-Code:

<style>
    .leftBox {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      border-radius: 10px;
      position: relative;
    }
 
    .rightBox {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      border-radius: 10px;
      position: relative;
    }
 
    .circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: radial-gradient(25px at center, white, skyblue);
      /* 绝对居中 */
      position: absolute;
      left: 50%;
      margin-left: -25px;
      top: 50%;
      margin-top: -25px;
    }
  </style>

js-Code:

<script>
  //获取dom元素,分别是左盒子 圆圈 右盒子
  var leftBox = document.querySelector(&#39;.leftBox&#39;);
  var circle = document.querySelector(&#39;.circle&#39;);
  var rightBox = document.querySelector(&#39;.rightBox&#39;);
  var text = document.querySelector(&#39;.text&#39;);
 
  //移动circle
  circle.
 
  //开启左盒子的移入事件
  leftBox.ondragover = function (event) {
    event.preventDefault();
  }
  leftBox.ondrop = function () {
    leftBox.appendChild(circle);
  }
 
  //开启右盒子的移入事件
  rightBox.ondragover = function (event) {
    event.preventDefault();
  }
  rightBox.ondrop = function () {
    rightBox.appendChild(circle);
  }
 
</script>

Effekt:

Hinweis:

Bezüglich der Verwendung von Ereignissen verwendet die offizielle Methode object.addEventListener("dragover", myScript) und event.target.id

Für weitere jQuery- und Javascript-Spezialeffekte wird empfohlen, die js-Spezialeffektsammlung zu besuchen!

Das obige ist der detaillierte Inhalt vonWie implementiert man den Box-Drag-Effekt in JS? (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie implementiert man die Funktionen „Alle auswählen“ und „Keine auswählen“ in JavaScript? (Codebeispiel)Nächster Artikel：Wie implementiert man die Funktionen „Alle auswählen“ und „Keine auswählen“ in JavaScript? (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen