网页元素拖动

参考链接 :

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>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值