html5 drag this,HTML5拖放(drag和drog)

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

1、设置元素为可拖放，也就是把drapgable属性设置为true

2、拖动什么-ondragstart和setData(),规定元素被拖动时会发生什么？

(1):ondragstart属性调用了一个函数drag(ev)，它规定了被拖动的数据.

(2):ev.dataTransfer.setData()方法设置被拖动数据的数据类型和值

funcation drag(ev){

ev.dataTransfer.setData("Text",ev.target.id);

//数据类型是："Text",值是可拖动元素的id

}

3、放置何处-ondragover,

ondragover事件规定被拖动元素放置在何处，默认地是无法将数据或元素拖放到其它元素中的，如果需要设置允许放置，我们必须阻止对元素的默认处理方式，这里就需要用到ondragover事件的event.preventDefault()方法

4、进行放置-ondrog

当放置被拖动元素时，会发生drop事件，ondrop属性会调用一个函数drop(event)

function drop(ev)

{

ev.preventDefault();//调用preventDefault()方法是用来阻止浏览器对元素的默认行为，(drap)的默认行为是以链接的形式打开

var data=ev.dataTransfer.getData("Text");//通完dataTransfer.getData("Text")方法获取被拖动的数据，该方法将返回和setData("Text")方法中设置为相同类型的任何数据

ev.target.appendchild(document.getElementById(data)//被拖动数据是被拖元素的id);//把被元素追加到放置元素中

}

实例1：

function drag(ev)//放置什么

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function dragOver(ev) {//如何放置

ev.preventDefault();

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

div {

width:280px;

height:250px;

border:1px solid #aaaaaa;

padding:10px;

}

将HTML5LOGO放入到上面的方框中

HTML5LOGO

实例2：

function drag(ev) {

ev.dataTransfer.setData("Text", ev.target.id);

}

function dragOver(ev) {

ev.preventDefault();

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

div {

width:200px;

height:100px;

border:1px solid #aaaaaa;

float:left;

margin:20px;

padding:10px;

}

figure {

clear:both;

}

来回放置图片

鲜花

HTML5拖放(drag和drog)作品

HTML5 拖放---drag和drop

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

HTML5 之拖放(drag与drop)

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

HTML5拖放(drag and drop)与plupload的懒人上传

HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

HTML5 拖放(Drag 和 Drop)功能开发——基础实战

随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

html5支持drag的拖放排序插件sortable.js

html5支持drag的拖放排序插件sortable.js

看到spring4的介绍上说已经支持websocket了,尝试了一下之后各种坑,不如servlet简单,写篇文章来讲解一下自己遇到的坑. 环境:tomcat8+spring4.1.6+jdk8+ngi ...

iOS: 学习笔记, Swift名字空间

在Swift中, 名字空间是用class(extension)嵌套来实现的, 下面用一个简单例子来进行展示 // // main.swift // SwiftNameSpace // // Creat ...

Pencil OJ 01 开发的准备

操作系统 ubuntu-12.04.5-desktop-amd64.iso 基本应用 Node 0.12.7 MongoDB 3.0.4 Robomongo 0.8.4 Atom 参考资料 OJ hu ...

python正则表达式与Re库

正则表达式是用来简洁表达一组字符串的表达式,一行胜千言,有点类似于数列的通项公式. 在python中提供了re库(regular expression)即正则表达式库,内置于python的标准库中,导 ...

WinForm -- 为TextBox文本框添加鼠标右键菜单

WinForm -- 为TextBox文本框添加鼠标右键菜单 1. 新建一个WinForm项目,放置一个TextBox控件 2. 从工具箱拖进来一个ContextMenuStrip 3. 将TextB ...

OpenCV编译以及QT Creator配置

OpenCV编译以及QT Creator配置 在进行编译前,需下载以下工具和源码: CMake ---- 用于编译: 下载地址; https://cmake.org/ 安装在D:\Program Fi ...

Quartz.NET 入门，带C#实例

概述 Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)来调度作业.它实现了 ...