html5中drag//drop拖曳效果的用法

鑫空间讲解

讲义

缺乏对clearData() dropEffect() effectAllowed()的理解

eg1:

把图像放在边框中

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:2px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

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

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("img");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br/>
<img id="drag1" width="100px" height="50px" src="drag.jpg" draggable="true" οndragstart="drag(event)"/>
</body>
</html>

eg2:图片在两个边框之中来回拖放

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:198px; height:66px; 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>

</body>
</html>

html5中drag//drop拖曳效果的用法相关推荐

使用ASP.NET Atlas实现拖放（Drag Drop）效果（下）
English Version: http://dflying.dflying.net/1/archive/77_atlas_drag__drop_overview.html 中文版:http://d ...
ASP.NET AJAX (Atlas) 拖放（Drag Drop）功能6种实现方法总结
在Ajax程序中实现传统桌面程序中异常简单的拖放功能却并不是件容易的事情.然而Web上的拖放功能又如此的让人痴迷,所以几乎每个成熟的Ajax类库都提供了自己的一套实现拖放的封装,ASP.NET AJA ...
html中用来表示主题标签的是什么,HTML5中的article标签是什么？HTML5中的article元素用在什么地方？...
HTML5中的article标签是什么?HTML5中的article元素用在什么地方?本篇文章主要为大家解释了什么是HTML5中的article标签,article用在什么地方,还有HTML5中art ...
HTML5 拖放Drag和drop用法以及事件介绍
dragstart:拖拽开始时在被拖拽元素上触发此事件 drag:拖拽过程中被拖拽的元素会持续不断地发drag事件. dragend:鼠标在拖放目标上释放时,在拖搜元素上触发,将元素从浏览器拖放到操作 ...
HTML5 drag drop 拖拽与拖放简介
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1419 一.前面的话 ...
HTML5原生拖拽/拖放 Drag Drop 详解
转载自:juejin.im/post/5a169d- 前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准 ...
html组态图动态拖拽,基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...
HTML5原生拖拽/拖放(drag drop)详解
前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
html5拖放详解,HTML5拖拽/拖放(drag drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - drag 在元 ...
html5怎么设置drop,HTML5 拖放（Drag 和 Drop）
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 将 RUNOOB.COM 图标拖动到矩形框中. 拖放拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标 ...

html5中drag//drop拖曳效果的用法

html5中drag//drop拖曳效果的用法相关推荐

最新文章

热门文章