HTML实现拖放

最新推荐文章于 2024-04-20 11:06:33 发布
最新推荐文章于 2024-04-20 11:06:33 发布
阅读量271 收藏 1
点赞数
文章标签： html5 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ys_dd/article/details/120037871
版权

效果图：

 

 代码：

<!DOCTYPE html>
<html lang="en">

<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>
    <style type="text/css">
        #div1 {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
            margin-bottom: 10px;
        }
        #div2 {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
            margin-bottom: 10px;
        }
        #div3 {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
            margin-bottom: 10px;
        }
        .img{
            height: 100px;
            width: 100px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <p>拖动图片到矩形框中:</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>

    <div class="img" id="img"  ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="./images/zhuanpan/draw_wheel_2.png" draggable="true" ondragstart="drag(event)" width="70" height="70"></div>
    



    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }

    </script>
</body>

</html>
  • 首先我这里要拖放的是img，先将img的draggable设为true。
  • 其次主要监听img拖放时的ondragstart事件，和拖放所在位置的div的ondrop和ondragover事件。

ondragstart：

规定当元素被拖动时，会发生什么。

ondrop：

进行放置。

ondragover：

事件规定在何处放置被拖动的数据。

杨杨得亿~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 拖放功能实现代码
09-27
以下是对拖放功能实现代码的详细解析： 1. **开启拖放功能** 要使一个元素变得可拖动，只需在其HTML标签上添加`draggable="true"`属性即可。例如： ```html (event)" width="336" height="69"> ``` 这里，图像...
HTML 拖放功能 - Drag&Drop
Kate_sicheng的博客
12-29 3018
Drag&Drop 拖拽功能的基本实现方法，DragEvent，DataTransfer等重要接口的解析...
HTML5 学习笔记（七）--- 元素拖放
weixin_45092437的博客
08-04 801
一、拖放事件 1、概念 ​ 在 HTML5 中增加了多个针对元素拖放的事件，使实现元素拖放变得更简单。拖放事件仅仅能实现拖放的动作，要想真正实现拖放后进行数据交互，还需要结合 dataTransfer 对象，才能真正实现拖放效果。 ​ **注意：**要实现元素拖放，首先要在目标元素上 设置 draggable = “true” ，否则无法实现拖放。 2、事件 **① dragStart：**在元素拖动开始时触发，事件对象是被拖动元素。 **② drag：**在元素拖动过程中触发，事件对象是被拖动元素。
10分钟掌握HTML拖放API！让你的网页元素瞬间拥有拖拽功能，轻松提升用户体验！
邓占勇的博客
04-09 1853
在日常开发中，拖拽功能无疑是一个常见的需求场景。为了更好地满足这一需求，HTML5提供了一套便捷的拖放API。这些API不仅能够帮助开发者轻松实现拖拽效果，还可以提高排查拖拽问题的效率，甚至可以让我们更加灵活地自定义拖拽场景和设计能力
HTML5实现拖放
上庸者-不服周
09-30 3794
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
HTML5原生拖拽/拖放 Drag & Drop 详解
delishcomcn的博客
08-21 2055
拖放（drap & drop）在我们平时的工作中，经常遇到。它表示：抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。我从几个方面学习并实践这个功能。
HTML5中实现拖放效果无须借助javascript
09-28
在传统的Web开发中，实现拖放效果通常需要借助JavaScript来处理事件和状态，但HTML5引入了原生的拖放API，使得开发者可以在不编写JavaScript的情况下实现基本的拖放功能。 首先，实现HTML5拖放的核心在于`draggable...
HTML5拖放效果的实现代码
09-27
HTML5为实现拖放操作提供了相关的API，使得拖放操作不仅限于特定的元素，而是任何网页元素都可以具备拖放功能。 为了实现拖放功能，首先需要将希望成为拖放源的元素的draggable属性设置为true，这样用户才能拖动该...
javascript实现拖放效果
10-23
在Web开发中，使用JavaScript实现拖放效果可以增加页面的交互性，改善用户体验。本文将详细介绍使用JavaScript实现拖放效果的核心知识点和基本原理。 首先，要实现拖放功能，需要使用到几个关键的DOM事件：...
HTML5拖放API实现拖放排序的实例代码
01-19
HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。 想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为...
html5文件拖放
04-15
NULL 博文链接：https://xingkongxieyang.iteye.com/blog/1767413
HTML 拖放
m0_60739529的博客
11-30 511
该技术更新于 HTML5 ，以前使用 mousedown + mousemove + mouseup 去实现元素的拖拽，更新后，将任意 HTML 元素的 draggable属性设置为 true 就能让元素可以被拖动。 <div class="box" draggable="true"></div> // 千万不要忘记 draggable 属性 把"拖放"这个词拆开来看，对应两个词 "拖拽 drag" 和 "释放 drop" ，所以这就是拖放行为发生时的两种状态。当鼠标点击对象.
HTML5拖放API之回收站效果
Sumer的博客
12-01 2201
HTML5拖放API之回收站效果 文件可拖至右边垃圾桶回收 js (1) 拖放删除功能 。当拖拽页面上文件夹元素至页面上回收箱图标并释放鼠标时，文件夹被删除。 (2) 弹出对话框功能，在删除文件时，弹出提示框（alert语句）。 var img1=document.getElementById('img1'); var img2=document.getElem...
【Html5拖放详解】
最新发布
2401_84341509的博客
04-20 962
拖放是常见是一个常见操作，在Html5中任何元素都可以被拖放。提示：以下是关于Html5中拖放的一些知识点，下面案例可供参考以上就是今天要讲的内容，本文简单介绍了拖放，希望可以有帮助。
HTML5 拖放
jiaomubai的博客
10-09 649
html5 新元素之拖放
html5拖放原理,html5之拖放详解
weixin_39557373的博客
05-30 247
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。1.drggable属性如果网页元素的draggable元素为true，这个元素就是可以拖动的。Draggable Div注意：在大多数浏览器中，a元素和img元素默...
html5中拖放,HTML5中的拖放
weixin_39994627的博客
06-22 209
关于HTML5中的拖放拖放(Drag 和 Drop)是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 中，拖放是标准的组成部分。在HTML5中用户可以使用鼠标选择一个可拖动元素，将元素拖动到一个可放置元素，并通过释放鼠标按钮放到这些元素。在拖动操作期间，可拖动元素的半透明表示跟随鼠标指针。如果我们希望元素可以被拖动，那么需要将其 draggable属性设为true (a标签dragg...
html实现拖放的棋盘游戏
12-21
以下是一个使用HTML和JavaScript实现拖放的棋盘游戏的例子： ```html <!DOCTYPE html> <html> <head> <style> .chessboard { display: flex; flex-wrap: wrap; width: 400px; height: 400px; border: 1px solid black; } .square { width: 50px; height: 50px; border: 1px solid black; } .piece { width: 50px; height: 50px; background-color: red; cursor: move; } </style> </head> <body> <div class="chessboard"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <script> var draggedPiece = null; function handleDragStart(event) { draggedPiece = event.target; event.dataTransfer.setData('text/plain', null); event.target.style.opacity = '0.5'; } function handleDragEnd(event) { event.target.style.opacity = '1'; } function handleDragOver(event) { event.preventDefault(); } function handleDrop(event) { event.preventDefault(); if (event.target.classList.contains('square')) { event.target.appendChild(draggedPiece); } } var pieces = document.getElementsByClassName('piece'); for (var i = 0; i < pieces.length; i++) { pieces[i].addEventListener('dragstart', handleDragStart); pieces[i].addEventListener('dragend', handleDragEnd); } var squares = document.getElementsByClassName('square'); for (var i = 0; i < squares.length; i++) { squares[i].addEventListener('dragover', handleDragOver); squares[i].addEventListener('drop', handleDrop); } </script> </body> </html> ``` 这个例子创建了一个棋盘游戏的HTML页面。棋盘由一系列正方形的格子组成，每个格子都可以拖放棋子。棋子被表示为红色的方块，可以通过拖动它们来移动到其他格子上。当拖动棋子时，它的透明度会降低，当放下棋子时，它会被放置在目标格子中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值