HTML5拖放

最新推荐文章于 2023-10-15 00:45:07 发布

zyz0728

最新推荐文章于 2023-10-15 00:45:07 发布

阅读量462

点赞数

分类专栏： html5 JavaScript

本文链接：https://blog.csdn.net/zyz0728/article/details/49933443

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html5

7 篇文章 0 订阅

订阅专栏

本文介绍了HTML5的拖放特性，包括如何设置元素为可拖放，拖动时的操作如ondragstart和setData()，如何指定放置位置通过ondragover，以及在drop事件中如何进行放置操作。通过示例代码解析了实现拖放功能的关键步骤，如阻止默认处理方式和获取被拖数据。

摘要由CSDN通过智能技术生成

所用例子在触屏设备无效

抓取一个对象后拖到另外一个位置

浏览器支持（ie9 ff opera12 chrome safari5）

safari5.1.2不支持拖放

设置draggable为true 让目标能被拖动

事件

1拖动元素时

a.dragstart-鼠标移入目标元素按下左键触发

b.drag-dargstart触发后移动鼠标连续触发该事件（类似mousemove事件）

c.gragend-拖动停止时触发无论现在处于拖动的有效位置还是无效位置

2当元素被拖动到一个有效的防治目标上时，触发下列事件（该阶段的事件目标—即target或者srcElement都是这个目标元素）

a.dragenter-只要有元素被拖动到放置目标上，就触发dragenter事件（类似mouseover）

b.dragover-触发dragenter后在有效目标范围内移动式连续触发该事件

c.dragleave-被拖动元素从目标范围内被拖出目标范围外时触发

d.drop-被拖动元素被放置到了目标范围内（即在有效目标范围内松动鼠标左键）

attention dragleave and drop 只能支出二者其一

   <!DOCTYPE HTML> 
  
 <html> 
  
 <head> 
  
 <script type="text/javascript"> 
  
 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> 
  
 </head> 
  
 <body> 
  
 <div id="div1" οndrοp="drop(event)" 
  
 οndragοver="allowDrop(event)"></div> 
  
 <img id="drag1" src="img_logo.gif" draggable="true" 
  
 οndragstart="drag(event)" width="336" height="69" /> 
  
 </body> 
  
 </html>

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

   <img  
  draggable="true" />

拖动什么 - ondragstart 和 setData()

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

在上面的例子中，ondragstart 属性调用了一个函数，drag( event)，它规定了被拖动的数据。

a 方法设置被拖数据的数据类型和值：

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

数据类型为text

放到何处 - ondragover

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

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

   event.preventDefault()

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

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

代码解释：

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中

<!DOCTYPE HTML>

<html>

<head>

#div1, #div2

{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

</style>

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));

//把目标数据插入到区域中（target）

}

</script>

</head>

<body>

</div>

</div>

</body>

</html>

可以相互拖动

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#fruite{
    width:1000px;
    height:200px;
    margin:20px auto;
    border:1px solid #000;
    }
#blanket{
    width:1000px;
    height:200px;
    margin:20px auto;
    border:1px solid #000;
    }
</style>
<script type="text/javascript">
function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id)
    }
function allowdrag(ev){
    ev.preventDefault();
    }
function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text",ev.target.id);
    ev.target.appendChild(document.getElementById(data));
    }
</script>
<meta charset="utf-8">
<title>水果分类</title>
</head>
<body>
<div id="fruite" οndrοp="drop(event)" οndragοver="allowdrag(event)">
    <img id="img1" src="image/daquan.jpg" οndragstart="drag(event)" draggable="true" width="200" height="100">
    <img id="img2" src="image/fupenzi.jpg" οndragstart="drag(event)" draggable="true" width="200" height="100">
    <img id="img3" src="image/taohua.jpg" οndragstart="drag(event)" draggable="true" width="200" height="100">
</div>
<div id="blanket" οndrοp="drop(event)" οndragοver="allowdrag(event)">
<!--这里放置被拖动的水果-->
</div>
</body>
</html>