html5拖放

原创 2015年11月18日 22:09:30
一:拖放(Drag 和 drop)
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

二:案例一

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
</head>  
<style type="text/css">  
    #div1 {width:488px;height:400px;padding:10px;border:1px solid #aaaaaa;}  
</style>  
<script type="text/javascript">  
    /*ondragover 事件规定在何处放置被拖动的数据。默认地,无法将数据/元素放置到其他元素中。  
    如果需要设置允许放置,我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的   
    event.preventDefault() 方法*/  
    function allowDrop(ev)  
    {  
        //该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。  
        ev.preventDefault();  
    }  
    //它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值  
    function drag(ev)  
    {  
        ev.dataTransfer.setData("Text",ev.target.id);  
    }  
    //当放置被拖数据时,会发生 drop 事件。  
    function drop(ev)  
    {  
        ev.preventDefault();  
        var data=ev.dataTransfer.getData("Text");  
        ev.target.appendChild(document.getElementById(data));  
    }  
</script>  
<body>  
<p>请把图片拖放到矩形中:</p>  
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  
<br />  
<!--描述:使元素可拖动,把 draggable 属性设置为 true-->  
<img id="drag1" src="img/1.jpg" draggable="true" ondragstart="drag(event)" />  
</body>  
</html>
代码解释:
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中
三:案例二来回拖动图片


<span style="font-size:18px;"><!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title></title>  
    <style type="text/css">  
    #div1, #div2  
    {float:left; width:200px; height:100px; margin:10px;padding:10px;border:1px solid #aaaaaa;}  
    </style>  
    <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" ondrop="drop(event)" ondragover="allowDrop(event)">  
  <img src="img/1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" />  
</div>  
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  
</body>  
</html>  </span>
建议使用谷歌浏览器观看效果!

版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5--拖拽API(含超经典例子)

一、关于拖拽API 拖拽API是HTML5的新特性,相对于其他新特性来说,重要程度占到6成,实际开发中使用比例占到3成,学习要求个人认为是达到掌握即可的程度。 二、什么是拖拽和释放? 拖...
  • baidu_25343343
  • baidu_25343343
  • 2016年11月18日 13:08
  • 14348

html5图片裁剪控件原型【含缩放,旋转,拖动功能】---2、核心代码

推荐这一篇文章是早年为了解决图片裁剪的探索性文章,现在已经开放出了falsh版及html5版本的图片裁剪插件,各位有时间可以看看: 浮士德html5图片裁剪器2016开源版 浮士德头像裁剪flas...
  • cdnight
  • cdnight
  • 2015年08月21日 11:25
  • 7340

html5实现图片任意拖放及本地图片拖放预览特效解析

最近一直在学习html5,对于图片在两个div内任意拖放感觉特别炫,扩展一下做一些特效应该很不错,而且还可以实现本地图片的拖拽上传功能,下面对上述两个功能做一个代码的解析: ** 1、HTML5...
  • u013137263
  • u013137263
  • 2015年08月24日 08:58
  • 1097

HTML5+JS游戏开发模块----canvas图片拖放

  • 2016年09月26日 15:01
  • 8KB
  • 下载

HTML5拖放(Drag和Drop)的例子

  • 2015年04月30日 08:58
  • 815KB
  • 下载

HTML5 拖放:在相册中对照片进行排序

  • 2013年03月21日 09:00
  • 70KB
  • 下载

html5图片拖放

  • 2016年11月17日 21:47
  • 69KB
  • 下载

HTML5元素拖拽drag与拖放drop相关API

其实HTML5就是新增一些有用的API 让我们更轻松的开发 从而把更多精力都放在业务逻辑上来 这些API的使用也非常简单 不过我的记性不太好 所以还是以博客的形式记录下来(手动滑稽...
  • qq_36663951
  • qq_36663951
  • 2018年01月09日 09:15
  • 42

初学HTML5 拖放(Drag 和 Drop)

初学HTML5 拖放(Drag 和 Drop)
  • Mankii
  • Mankii
  • 2016年09月05日 10:40
  • 190

【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放

导航 【初探HTML5之使用新标签布局】用html5布局我的博客页! 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放 【HTML5初探之绘制图像(上)】看我canvas元素...
  • w549265480
  • w549265480
  • 2013年06月24日 11:00
  • 455
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5拖放
举报原因:
原因补充:

(最多只允许输入30个字)