拖拽上传

最新推荐文章于 2024-12-24 20:10:33 发布

原创最新推荐文章于 2024-12-24 20:10:33 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

HTML5

3 篇文章

订阅专栏

本文详细介绍如何使用HTML5的拖放API实现DOM元素的拖拽功能，包括dragstart、dragover、drop等事件的使用，以及jQuery在事件处理中的应用。

draggable=“true” 页面设置后才可以拖拽
dragstart 事件开始拖动元素时触发
drop 事件拖动过程中，释放鼠标键时触发此事件
dragover 事件被拖动的对象在另一对象容器范围内拖动时触发此事件
dragenter 事件完拖动的对象进入其容器范围内时触发此事件
dragleave 事件拖动的对象离开其容器范围内时触发此事件

书写就按照上面的顺序

实例

<style>
  .page {
    width: 1000px;
    margin: 0px auto;
  }

  .left {
    width: 500px;
    float: left;
  }

  .left .container {
    padding: 10px;
    min-height: 500px;
    box-sizing: border-box;
  }

  .left .containerDrop {
    background: #eeeeee;
  }

  .left .container h1 {
    text-align: center;
  }

  .right {
    width: 500px;
    float: left;
    box-sizing: border-box;
    border-left: 1px solid red;
  }

  .right .ctrlList {
    padding: 10px;
  }

  .right .ctrlList .box {
    border: 1px dashed gray;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .line {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
  }
</style>
<div class="page">
  <div class="left">
    <div id="container" class="container">
      <h1>问卷</h1>
    </div>
  </div>
  <div class="right">
    <div class="ctrlList">
      <div class="box" draggable="true">
        <div class="line">
          <span>姓名：</span>
          <input type="text" name="name" placeholder="请输入真实姓名"></input>
        </div>
      </div>
      <div class="box" draggable="true">
        <div class="line">
          <span>年龄：</span>
          <input type="number" name="age" placeholder="请输入年龄"></input>
        </div>
      </div>
      <div class="box" draggable="true">
        <div class="line">
          <span>性别：</span>
          <input type="radio" name="gender" value="male">男</input>
          <input type="radio" name="gender" value="female">女</input>
        </div>
      </div>
      <div class="box" draggable="true">
        <div class="line">
          <span>兴趣爱好：</span>
          <input type="checkbox" name="hobby" value="basketball">篮球</input>
          <input type="checkbox" name="hobby" value="football">足球</input>
          <input type="checkbox" name="hobby" value="tennis">网球</input>
          <input type="checkbox" name="hobby" value="	badminton">羽毛球</input>
          <input type="checkbox" name="hobby" value="tabletennis">乒乓球</input>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    var dragSrc;

    $(".box").each(function (index, ele) {
      $(ele).on("dragstart", function (event) {
        dragSrc = this;
      })
    });

    $("#container").on("drop", function (e) {
      e.preventDefault();
      $(this).append($(dragSrc).find('.line').clone());
      $(this).removeClass("containerDrop");
    }).on("dragover", function (e) {
      e.preventDefault();
    }).on("dragenter", function (e) {
      e.preventDefault();
      $(this).addClass("containerDrop");
    }).on("dragleave", function (e) {
      e.preventDefault();
      $(this).removeClass("containerDrop");
    })
  });
</script>