Wie implementiert man den Box-Drag-Effekt in JS? (mit Code)-js-Tutorial-php.cn

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

青灯夜游

Freigeben： 2020-06-16 10:31:29

nach vorne

3097 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!