html拖放数据库字段,HTML5 拖放（Drag 和 Drop）

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

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

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

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

}

拖动 W3CSchool.cc 图片到矩形框中:

它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。

设置元素为可拖放

首先，为了使元素可拖动，把 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")

把被拖元素追加到放置元素(目标元素)中

HTML5 拖放---drag和drop

拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true:  例:

基于HTML5的Drag and Drop生成图片Base64信息

HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...

HTML5 之拖放(drag与drop)

拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

HTML5拖放(drag和drog)

拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...

通过HTML5的Drag and Drop生成拓扑图片Base64信息

HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...

炫酷的html5(Drag 和 drop)拖放

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.也是一种常见的特性,即抓取对象以后拖到另一个位置. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.C ...

拖放(Drag和Drop)--html5

拖放,就是抓取一个对象后拖放到另一个位置.很常用的一个功能,在还没有html5的时候,我们实现这个功能,通常会用大量的js代码,再利用mousemove,mouseup等鼠标事件来实现,总的来说比较麻 ...

HTML 5 拖放(Drag 和drop)

浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把标签 draggable 属性设置为 true. 2.向标签添加on ...

Android开发者指南-用户界面-拖放-Drag and Drop[原创译文]

英文原文:http://developer.android.com/guide/topics/ui/drag-drop.html 版本:Android 4.0 r1 译者注:黄色底色为未决译文 快 ...

HTML5拖放(drag和drog)作品

随机推荐

【推荐】CentOS安装Subversion-1.8.11+HTTP协议支持配置

注:以下所有操作均在CentOS 6.5 x86_64位系统下完成. 我们需要搭建一个自己的SVN服务器. 此外,搭建好的SVN服务器除了需要支持svn协议外,最好还需要支持HTTP协议和HTTPS协 ...

Linux screen 命令

简单的来说 在screen里面敲的命令都是在后台的,所以不需要想bg那样,ctrl+z在bg把后台服务运行起来.而且下次可以直接进去screen作业的后台界面,可以看到我们过去敲的命令记录,即使你的C ...

Python + OpenCV2 系列：1 - 配置

Python+OpenCV2+Eclipse+Windos 8.1(32bits): 最初的目的是做图像处理,opencv强大的社区支持,让我想从matlab转到opencv框架下进行试验,而Pyth ...

[zz] demand require request用法辨析

http://zhidao.baidu.com/link?url=9Q50HiOF1fWav1nSnREbc_H1jTuAHxAjeVLbZoB5bGO3ZehPxLhQdob4oGO3slMRl0W ...

Symfony VarDumper Component

Symfony VarDumper 类似 php var_dump() 官方文档写的安装方法 : 按照步骤 就可以在 running any PHP code  时候使用了 In order to h ...

linux网络编程之TCP/IP基础

(一):TCP/IP协议栈与数据包封装 一.ISO/OSI参考模型 OSI(open system interconnection)开放系统互联模型是由ISO(International Organi ...

Akka(7)： FSM：通过状态变化来转换运算行为

在上篇讨论里我们提到了become/unbecome.由于它们本质上是堆栈操作,所以只能在较少的状态切换下才能保证堆栈操作的协调及维持程序的清晰逻辑.对于比较复杂的程序流程,Akka提供了FSM:一种 ...

机器学习入门17 - 嵌套 (Embedding)

原文链接:https://developers.google.com/machine-learning/crash-course/embeddings/ 嵌套是一种相对低维的空间,可以将高维矢量映射到 ...

wav文件格式分析与详解

WAV文件是在PC机平台上很常见的.最经典的多媒体音频文件,最早于1991年8月出现在Windows 3.1操作系统上,文件扩展名为WAV,是WaveFom的简写,也称为波形文件,可直接存储声音波形, ...