网页元素拖动

匠心精神

已于 2023-05-17 10:10:45 修改

阅读量235

点赞数

文章标签： javascript css html

于 2023-05-15 11:40:17 首次发布

本文链接：https://blog.csdn.net/qq_36623327/article/details/130681306

版权

参考链接：

https://zhuanlan.zhihu.com/p/285809158

代码实现

<!DOCTYPE html>
<html lang="en">
  <!-- 
* **** 技术实现方案 ****
* 想实现拖拽效果，需要在元素上增加 draggable="true" 属性，允许元素拖动
*
* 一、拖拽元素（拖动哪个元素）
* ondragstart当拖拽开始时调用
* ondragleave 当鼠标离开拖拽元素时调用
* ondragend 当拖拽结束时调用
* ondrag 整个拖拽过程都会调用
*
* 二、目标元素（拖到哪个元素）
* ondragenter 当拖拽元素进入时调用
* ondragover 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
* 注意：此事件一定要调用 e.preventDefault() ，否则后面的方法 ondrop() 无法触发
* 实际测试中必须调用此方法 function ondragoverFunction(event){ event.preventDefault() } 之后 ，ondrop 才可以触发
* ondrop 当在目标元素上松开鼠标时调用
* ondragleave 当鼠标离开目标元素时调用
-->
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div style="width: 100%; display: flex">
      <!-- 左侧div -->
      <div id="leftDiv" class="bord">
        <div
          class="dragElement operationDiv"
          draggable="true"
          id="left"
          ondragstart="changeDragElement(event)"
          ondrop="changeDragenter(event)"
          ondragover="lisenDragover(event)"
        ></div>
      </div>
      <!-- 右侧div -->
      <div id="rightDiv" class="bord">
        <div
          class="targetElement operationDiv"
          draggable="true"
          id="rigth"
          ondragstart="changeDragElement(event)"
          ondrop="changeDragenter(event)"
          ondragover="lisenDragover(event)"
        ></div>
      </div>
    </div>
    <div id="result" class="resultDiv"></div>
  </body>
</html>
<script> 
  var dragElement = null;
  var targetElement = null;

  /**
   * ondragstart在元素当拖拽开始时调用
   */
  function changeDragElement(event) {
    dragElement = targetElement = null;
    dragElement = event;
  }

  /**
   * 监听拖动，必须执行   event.preventDefault();
   */
  function lisenDragover(event) {
    event.preventDefault();
  }

  /**
   * ondragenter 在拖拽元素进入时调用
   */
  function changeDragenter(event) {
    targetElement = event;
    consoleResult();
  }

  function consoleResult() {
    document.getElementById("result").innerHTML =
      "将" + dragElement.target.id + "拖拽到" + targetElement.target.id;
  }
</script>
<style>
  .bord {
    width: 50%;
    float: left;
    display: flex;
    justify-content: center;
  }
  .operationDiv {
    width: 200px;
    height: 200px;
  }
  .dragElement {
    background-color: tomato;
  }
  .targetElement {
    background-color: deeppink;
  }
  .resultDiv {
    text-align: center;
  }
</style>