欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)盒子拖拽效果

 更新時(shí)間：2020年02月06日 11:02:04   作者：阿貓阿狗哈  
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)盒子拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)盒子拖拽效果的具體代碼，供大家參考，具體內(nèi)容如下

效果:

html代碼:

<!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>
  <div class="leftBox"></div>
  <div class="rightBox">
    <!-- 開(kāi)啟拖拽屬性draggable -->    
    <div class="circle" draggable="true"></div>
  </div>
</body>
 
</html>

css代碼:

<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);
      /* 絕對(duì)居中 */
      position: absolute;
      left: 50%;
      margin-left: -25px;
      top: 50%;
      margin-top: -25px;
    }
  </style>

js代碼:

<script>
  //獲取dom元素,分別是左盒子 圓圈 右盒子
  var leftBox = document.querySelector('.leftBox');
  var circle = document.querySelector('.circle');
  var rightBox = document.querySelector('.rightBox');
  var text = document.querySelector('.text');
 
  //移動(dòng)circle
  circle.
 
  //開(kāi)啟左盒子的移入事件
  leftBox.ondragover = function (event) {
    event.preventDefault();
  }
  leftBox.ondrop = function () {
    leftBox.appendChild(circle);
  }
 
  //開(kāi)啟右盒子的移入事件
  rightBox.ondragover = function (event) {
    event.preventDefault();
  }
  rightBox.ondrop = function () {
    rightBox.appendChild(circle);
  }
 
</script>

關(guān)于事件的用法,官方用到了object.addEventListener("dragover", myScript)和event.target.id

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論