下面的例子是一个简单的拖放实例:
引用
<!DOCTYPE HTML>
<html>
<head>
<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>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
步骤:
设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :
<img draggable="true">
拖动什么 - ondragstart 和 setData()
然后,规定当元素被拖动时,会发生什么。
在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。
放到何处 - 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")
把被拖元素追加到放置元素(目标元素)中
分享到:
相关推荐
qt实现拖放文件到界面上,获取内容等 Qt 文件的拖放 drag - drop。该文章的demo的源码 https://blog.csdn.net/linbounconstraint/article/details/107518650
Window下拖放操作Drag & Drop 全解析
在工作当中,我们会常常见到像UC浏览器的新选项卡一样的可以自定义拖拽摆放效果。大的像淘宝的装修,QQ空间装扮等,小到一些游戏等等随处可见拖放的使用场景。...HTML5 Drag Drop 拖放例子 dragenter
wpf,实现了鼠标拖放操作,可以像win7桌面的图标一样拖放
drag and drop 拖放库 vue dnd mobile
windows平台上实现IDropSource、IDropTarget和IDataObject接口,实现拖放功能。拖放功能包含源和目标两块,可以单独实现,也可以同时实现拖和放两个功能。
Qt Drag Drop之拖放.zip
Qt之QToolButton与QGroupBox实现动态拖拽Drag、Drop功能,可以随意拖放到QGroupBox内,也可以与现有的QToolButton交换位置,也可以拖拽出QGroupBox外释放
npm install --save-dev @4tw/cypress-drag-drop 或纱线 yarn add --dev @4tw/cypress-drag-drop 在加载 Cypress 之前(通常在您的commands.js )放置以下行: require ( '@4tw/cypress-drag-drop' ) 或者,...
一套简化拖放操作的组件包,虽然很老了,不过也支持D7。
day21-Drag N Drop(拖放图片)
本篇文章主要介绍了HTML5 拖放(Drag 和 Drop)详解与实例代码,具有一定的参考价值,有兴趣的可以了解一下
主要为大家介绍了HTML5+CSS3实现拖放(Drag and Drop)的实现方法,需要的朋友可以参考下
Angular-ng-drag-drop.zip,角度拖放-基于HTML5,无外部依赖关系。角度拖放,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的...
angular-drag-drop, 在没有任何外部依赖关系的angular.js 中,声明性拖放 Angular drag-and-drop Angular.js 中的声明性拖放和零依赖版权所有( C ) 2015,Geoff Goodman ( https://github.com/ggoodman )安装多种...
安装拖放:$ bower install -S gardiner/draganddrop 在文件头中包含jQuery和拖放:< link href =' bower_components/draganddrop/src/draganddrop.css ' rel =' stylesheet ' type =' text/css '/>< ...
大家都知道拖放是一种常见的特性,即抓取对象以后拖到另一个位置。...拖放是在“拖放源(drag source)”和“拖放目标(drop target)”之间传输数据的用户界面。下面这篇文章给大家详细介绍了HTML5中的拖放事件。
A Drag and Drop List Control的Demo