H5拖放（Drag and drop）几个方案

最新推荐文章于 2023-07-21 17:20:09 发布
最新推荐文章于 2023-07-21 17:20:09 发布
阅读量1.3k 收藏 5
点赞数 2
分类专栏： HTML 笔记 文章标签： js javascript html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45644092/article/details/105353228
版权

使用Drag随意拖拽图片到页面的任意处：
方案一：

<html>
<head>
  <title>Drag</title>
  <style type="text/css">
  </style>
</head>
<body>
  <div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"></div>
  <div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"></div>
  <div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:80px; width:80px;"></div>
</body>
<script type="text/javascript">
  var Drag = {
    //当前被drag的对象
    obj: null,
    //当前所有可脱拽对象中最大的zIndex;
    maxZIndex: 100,
    //初始化 
    init: function (id) {
      var o = document.getElementById(id);
      //当onmousedown开始拖拽
      o.onmousedown = Drag.start;
      o.style.zIndex = Drag.maxZIndex;
      //alert(Drag.maxZIndex);
      Drag.maxZIndex += 1;
    },  
    start: function (e) {
      var o = Drag.obj = this;
      //lastMouseX，lastMouseY记录上次鼠标的位置
      o.lastMouseX = Drag.getEvent(e).x;
      o.lastMouseY = Drag.getEvent(e).y;
      //提高当前被推拽对象的zIndex使之处于最顶层
      o.style.zIndex = Drag.maxZIndex;
      Drag.maxZIndex += 1;
      //status = o.maxZIndex;
      //当onmousemove开始移动
      document.onmousemove = Drag.move;
      //当onmouseup终止拖拽
      document.onmouseup = Drag.end;
    },
    move: function (e) {
      //alert(this.maxZIndex);
      var o = Drag.obj;
      //dx, dy表示鼠标移动的距离
      var dx = Drag.getEvent(e).x - o.lastMouseX;
      var dy = Drag.getEvent(e).y - o.lastMouseY;
      //因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化
      var left = parseInt(o.style.left) + dx;
      var top = parseInt(o.style.top) + dy;
      o.style.left = left;
      o.style.top = top;
      o.lastMouseX = Drag.getEvent(e).x;
      o.lastMouseY = Drag.getEvent(e).y;
    },
    end: function (e) {
      document.onmousemove = null;
      document.onMouseup = null;
      Drag.obj = null;
    },
    //辅助函数，处理IE和FF不同的event模型
    getEvent: function (e) {
      if (typeof e == 'undefined') {
        e = window.event;
      }
      //alert(e.x?e.x : e.layerX);
      if (typeof e.x == 'undefined') {
        e.x = e.layerX; //复制了n遍，到了csdn就变成ee.x了
      }
      if (typeof e.y == 'undefined') {
        e.y = e.layerY; //复制了n遍，到了csdn就变成ee.x了
      }
      return e;
    }
  };
</script>
<script type="text/javascript">
  //测试代码开始，使三个div具有drag and drop的能力。
  Drag.init('r');
  Drag.init('g');
  Drag.init('b');
</script>
</html>

方案一效果图：
在这里插入图片描述
方案2：照片墙

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>drag案例的演示</title>
  <style>
    img {
      background: #e54d26;
      width: 300px;
      height: 200px;
      margin: 0;
      padding: 0;
    }
    #cun {
      margin: 0;
      padding: 0;
      width: 602px;
      height: 403px;
      border: 2px solid #D2D2D2;
      box-shadow: 1px 4px 8px #646464;
    }
  </style>
</head>
<section>
  <p>你可以把喜欢的图片拖放到下面的框中！</p>
  <p>也可以随意的把拖进来的图片换位置，按自己的喜欢排版</p>
</section>
<div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img src="banana.jpg" id="tuo1" draggable="true" ondragstart="drag(event)" />
<img src="dog.jpg" id="tuo2" draggable="true" ondragstart="drag(event)" />
<img src="dog2.jpg" id="tuo3" draggable="true" ondragstart="drag(event)" />
<img src="cat.jpg" id="tuo4" draggable="true" ondragstart="drag(event)" />
<script>
  function allowDrop(ev) {
    //不执行默认处理（拒绝被拖放）
    ev.preventDefault();
  }
  function drag(ev) {
    //使用setData（数据类型，携带的数据）
    //方法将要拖放的数据存入datatransfer对象
    //    var dragid = document.getElementById(id).value;
    ev.dataTransfer.setData("Text", ev.target.id);
  }
  function drop(ev) {
    //不执行默认处理（拒绝被拖放）
    ev.preventDefault();
    //使用getData()获取到数据，然后赋值给data
    var data = ev.dataTransfer.getData("Text");
    //判断target的id是否和下面图片中的id相等的 相等说明是要把两张图片换一下
    var flag = 0;
    for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
      if (document.getElementsByTagName("img")[i].id == ev.target.id) {
        flag = 1;
      }
    }
    if (flag == 1) {
      var temp = document.getElementById(data).src;
      document.getElementById(data).src = document.getElementById(ev.target.id).src;
      document.getElementById(ev.target.id).src = temp;
    } else {
      //使用appendChild方法把拖动的节点放到元素节点中成为他的子节点
      ev.target.appendChild(document.getElementById(data));
    }
  }
</script>
</body>
</html>

方案二效果：
在这里插入图片描述
方案三：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,
    maximum-scale=1, user-scalable=no">
  <link rel="icon" href="https://xlzy520.cn/icons/lo.ico">
  <title>drag</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      background: #000;
    }
    #dance {
      cursor: pointer;
      height: 30px;
      width: 30px;
      background-color: aqua
    }
  </style>
</head>
<body ondrop="drop(event)" ondragover="allowDrop(event)" ontouchmove="drop(event) ">
  <div class="main">
    <img style="position: absolute;left: 0;top: 0;" src="" draggable="true" id="dance" ondragstart="drag(event)"
      ontouchstart="drag(event)">
  </div>
  <script>
    (function () {
      document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px'
      document.getElementsByTagName('body')[0].style.width = window.innerWidth + 'px'
    })()
    let dance = document.getElementById('dance')
    let dragOffset = {
      X1: null,
      Y1: null
    }
    function drag(e) {
      if (e.type === 'dragstart') { //根据e.type判断是PC端还是移动端
        e = event ? event : e
      } else {
        if (event.touches) {
          e = event.touches[0] ? event.touches[0] : event;
        }
      }
      dragOffset.X1 = e.clientX - parseInt(dance.style.left)
      dragOffset.Y1 = e.clientY - parseInt(dance.style.top)
      // 鼠标点击的位置在整个页面上的坐标是（e.clientX，e.clientY）
      // 鼠标点击的位置在图片的位置坐标为（X1，Y1）
    }
    function drop(e) {
      if (e.type === 'drop') {
        e = event ? event : e
        e.preventDefault()
      } else {
        if (event.touches) {
          e = event.touches[0] ? event.touches[0] : event;
        }
      }
      dance.style.left = e.clientX - dragOffset.X1 + 'px'
      dance.style.top = e.clientY - dragOffset.Y1 + 'px'
      // 根据鼠标点击的位置在整个页面上的坐标和在图片上的坐标来确定整个图片的坐标
    }
    function allowDrop(e) {
      e = event ? event : e
      // 移动过程中触发
    }
    document.ondragover = function () {
      //取消事件的默认行为
      return false;
    }
    document.ondrop = function () {
      //取消事件的默认行为
      return false
    }
  </script>
</body>
</html>

方案三效果图：
在这里插入图片描述
案例四：

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <style type="text/css">
    div>div {
      display: inline-block;
      padding: 10px;
      background-color: #aaa;
      margin: 3px;
    }
  </style>
</head>
<body>
  <div style="width:600px;border:1px solid black;">
    <h2>可将喜欢的项目拖到收藏夹</h2>
    <div draggable="true" ondragstart="dsHandler(event)">勿忘心安</div>
    <div draggable="true" ondragstart="dsHandler(event)">照顾自己</div>
    <div draggable="true" ondragstart="dsHandler(event)">Number 9</div>
    <div draggable="true" ondragstart="dsHandler(event)">崇拜</div>
  </div>
  <div id="dest" style="width:400px;height:400px;border:1px solid black;float:left;">
    <h2 οndragleave="return false;">收藏夹</h2>
  </div>
  <div id="gb" draggable="false" style="width:100px;height:100px;border:1px solid red;float:left;">我是垃圾桶</div>
  <script>
    var dest = document.getElementById("dest");
    var dsHandler = function (evt) {
      evt.dataTransfer.setData("text/plain", "<item>" + evt.target.innerHTML);
      console.log(evt.dataTransfer.setData("text/plain", "<item>" + evt.target.innerHTML));
    }
    dest.ondrop = function (evt) {
      var text = evt.dataTransfer.getData("text/plain");
      if (text.indexOf("<item>") == 0) {
        var newEle = document.createElement("div");
        newEle.id = new Date().getUTCMilliseconds();
        newEle.innerHTML = text.substring(6);
        newEle.draggable = "true";
        newEle.ondragstart = function (evt) {
          evt.dataTransfer.setData("text/plain", "<remove>" + newEle.id);
          console.log(evt.dataTransfer.setData("text/plain", "<remove>" + newEle.id));
        }
        dest.appendChild(newEle);
      }
    }
    document.getElementById("gb").ondrop = function (evt) {
      var id = evt.dataTransfer.getData("text/plain");
      if (id.indexOf("<remove>") == 0) {
        var target = document.getElementById(id.substring(8));
        dest.removeChild(target);
      }
    }
    document.ondragover = function (evt) {
      return false;
    }
    document.ondrop = function (evt) {
      return false;
    }
  </script>
</body>
</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>Document</title>
  <style>
    .main {
      display: flex;
      justify-content: space-around;
    }
    .left {
      width: 300px;
      height: 500px;
      margin-right: 10px;
      border: 1px solid red;
      text-align: center;
      box-sizing: border-box;
      padding: 1px;
    }
    .right {
      width: 300px;
      height: 500px;
      border: 1px solid lightseagreen;
      text-align: center;
      box-sizing: border-box;
      padding: 1px;
    }
    .txt {
      border: 1px solid gray;
      margin: 1px;
      padding: 5px;
      cursor: move;
    }
  </style>
</head>
<body>
  <main class="main">
    <div class="left" id="left">
      <div class="txt-show">左边区域</div>
      <div id='txt1' draggable="true" class="dragable txt txt1">可移动的文字一</div>
      <div id='txt2' draggable="true" class="dragable txt txt2">可移动的文字二</div>
      <div id='txt3' draggable="true" class="dragable txt txt3">可移动的文字三</div>
      <div id='txt4' draggable="true" class="dragable txt txt4">可移动的文字四</div>
      <div id='txt5' draggable="true" class="dragable txt txt5">可移动的文字五</div>
    </div>
    <div class="right" id='right'>
      <div class="txt-show">右边区域</div>
    </div>
  </main>
  <script>
    let txtObj = document.getElementsByClassName('txt')
    for (let i = 0; i < txtObj.length; i++) {
      txtObj[i].ondragstart = handle_start
      txtObj[i].ondrag = handle_drag
      txtObj[i].ondragend = handle_end
    }
    function handle_start(e) {
      e.dataTransfer.setData('Text', e.target.id)
      console.log('handle_start-拖动开始')
    }
    function handle_drag(e) {
      console.log('handle_drag-拖动中')
    }
    function handle_end(e) {
      console.log('handle_end-拖动结束')
    }
    let target = document.getElementById('right')
    target.ondragenter = handle_enter
    target.ondragover = handle_over
    target.ondragleave = handle_leave
    target.ondrop = handle_drop
    let leftTarget = document.getElementById('left')
    leftTarget.ondragenter = handle_enter
    leftTarget.ondragover = handle_over
    leftTarget.ondragleave = handle_leave
    leftTarget.ondrop = handle_drop
    function handle_enter(e) {
      e.preventDefault()
      console.log('handle_enter-进入目的地')
    }
    function handle_over(e) {
      e.preventDefault()
      let returnObj = e.dataTransfer.getData('Text')
      console.log(returnObj + '-handle_over-在目的地范围内')
    }
    function handle_leave(e) {
      e.preventDefault()
      let returnObj = e.dataTransfer.getData('Text')
      console.log(returnObj)
      console.log('handle_leave-没有放下就离开目的地')
    }
    function handle_drop(e) {
      e.stopPropagation(); // 不再派发事件。解决Firefox浏览器，打开新窗口的问题。
      e.preventDefault()
      let returnObj = e.dataTransfer.getData('Text')
      if (returnObj) {
        e.target.appendChild(document.getElementById(returnObj))
      }
      console.log(returnObj + '-handle_drop-在目的地区释放')
    }
  </script>
</body>
</html>

效果图五
在这里插入图片描述

Friday--星期五
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
h5-鼠标拖拽方块移动案例
weixin_54057363的博客
03-22 719
h5中鼠标点击拖动方块
HTML5元素拖拽drag与拖放drop相关API
02-25
其实HTML5就是新增一些有用的API让我们更轻松的开发从而把更多精力都放在业务逻辑上来这些API的使用也非常简单不过我的记性不太好所以还是以博客的形式记录下来（手动滑稽）今天就来写一下这个拖拽API说起拖放，其实...
HTML5实现拖放
上庸者-不服周
09-30 2859
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
通过拖拽的方法自动生成html
06-29
通过拖拽的方法自动生成html 通过拖拽的方法自动生成html
拖拽的方式使用qbuttongroup_基于Vue和H5（Drag）的拖拽式表格
weixin_39682412的博客
11-30 236
先上最终效果图拖拽式表格是如何设计的？我想大家可能对拖拽式表单，拖拽式图表有所了解过。如这样： 或者是这样的 那么拖拽式表格到底是什么样的呢，我们来看看设计页面！实现一个拖拽式表格需要哪些功能？其实不难看出，拖拽模式下的产物往往离不开以下几个功能：拖拽（这里使用h5的drag）组件（控件）的数据源拖拽时的渲染方式撤销与恢复（方便我们设计表格）拖拽式表格的核心功能点如下：组件分为统计字段...
vue3+ts+element-plus管理系统实际开发之H5 拖放事件实现一个拖拉拽
最新发布
07-21 668
vue3+ts+element-plus管理系统实际开发之H5 拖放事件实现一个拖拉拽
h5特性可以拖动元素都任何位置的demo
weixin_42327537的博客
06-05 367
js 手写拖拽页面的demo
H5拖拽方法drag在VUE中的应用实例
Annie的博客
08-12 5510
网上有关拖拽操作的轮子有很多，但总有一些需求是轮子满足不了的。当使用轮子无法满足自己的需求时，使用H5原生的拖拽方法有以下优势： api丰富，可灵活实现拖拽需求 避免了轮子本身bug修改的不便 为了让自己深刻理解api，根据需求，我简化实现了一个vue项目中的拖拽实例，也供大家参考。 需求如下： 左侧区域字段不支持排序，但可拖动字段到右侧分...
H5元素draggable实现拖拽操作
qq_72760247的博客
03-22 289
H5元素draggable实现拖拽操作
vue中 使用h5 drag实现拖拽功能
m0_48791508的博客
04-26 773
先了解一下h5中的drag事件： 先贴一段代码： 先设置draggable属性为true //开始拖拽时执行 通过e.dataTransfer.setData 设置数据 handleDragStart (e, item) { e.dataTransfer.setData('draggingData', item); this.dragging = item; // 第二种写法，不使用setData那种写法，自己在data中定义一个变量 }, // 拖拽完成事件(
H5鼠标拖动事件（drag）
个人博客
11-15 2072
H5鼠标拖动事件一、元素拖动二、相关事件1.拖拽元素（1）dargstart（2）drag（3）dragend2.目标元素（1）drop（2）dragover（3）dragenter（3）dragleave 一、元素拖动 HTML5已经完全支持鼠标拖动元素，其中图片和链接默认就支持拖拽，而其他的元素需要设置属性draggable=“true” 就可支持拖拽。其中在拖拽的过程中会默认触发一系列事件。 二、相关事件 1.拖拽元素 被拖拽的元素自身 <div id="box" draggable="
angular-drag-and-drop-lists：使用HTML5拖放API对嵌套列表进行排序的Angular指令
02-28
：尽管它似乎不支持嵌套列表（ ）并且不使用HTML5 Drag＆Drop API（虽然取决于您的用例，这可能是一件好事，但它似乎不支持嵌套功能）：很多功能并得到了很好的支持） 让我知道是否还有其他应在此处添加的库。 ...
jQuery+CSS3支持文件拖放上传代码
06-10
这是一款基于jQuery+CSS3实现的支持文件拖放上传代码，带动画效果的jQuery文件上传插件。
HTML5中的拖放实现详解
01-21
拖放（Drag 和 Drop）是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 中，拖放是标准的组成部分。在HTML5中用户可以使用鼠标选择一个可拖动元素，将元素拖动到一个可放置元素，并通过释放鼠标按钮放到...
H5音频和视频（video和audio）
周五星的博客
04-06 1841
音频和视频 1: 以下属性可以直接写在video标签中 <video controls loop muted poster="res/x.png"> <source src="res/x.mp4"> 您的浏览器版本太低请升级 </video> 成员属性： autoplay 是否自动播放 controls ...
H5新特性地理定位（geolocation）
周五星的博客
04-04 935
一：介绍使用的知识点 1.地理定位的原理 2.geolocation对象 3.Geolocation Api 4.getCurrentPosition的第一个参数 5.getCurrentPosition的第二个参数 6.getCurrentPosition的第三个参数 7.watchPosition与clearPosition函数 二：程序演示 1.注意...
H5新特性画布(canvas）
周五星的博客
04-06 920
画布（Canvas） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--1.Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（...
H5离线缓存（applicationCache ）
周五星的博客
04-06 892
离线缓存（applicationCache ） 离线缓存（applicationCache ）简单理解就是第一次加载后将数据缓存，在没有清除缓存前提下，下一次没有网络也可以加载，用在静态数据的网页或游戏比较好用，这些文件包括html、js、css、img等文件。当然，Html5新的特性都不是所有浏览器都能支持的，离线缓存也一样。反正IE9（包括）及IE9以下的浏览器目前是不支持的。如果用在移动端...
h5物体拖动_HTML5原生拖拽/拖放(drag & drop)详解
06-13
好的，关于h5物体拖动和HTML5原生拖拽/拖放的详解，我可以为您进行讲解。 在HTML5中，拖放是一种非常常见的交互方式，可以在...以上是对h5物体拖动和HTML5原生拖拽/拖放(drag & drop)的详解，希望能够对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Friday--星期五

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值