学习HTMLT5_1 拖拽

好久没有开始写blog了，把好些东西都搬到了博客园。一直以来想做一个自己理想的系统，好好练习一下所以学的JAVAEE知识。可惜到现在没有找下一个好的UI搭档，自己又是个色废。只好自己去摸索去做UI，完成后找个色彩感强力一点的UI填充颜色。新的系统打算用HTML5和CSS3 做PC 端，然后连接android和IOS做为手持端。

计划一天学习一章HTML5，因为有HTML4的基础，学习HTML稍微有一点难度，其中可能有几个原因，第一是资料比较少，好些方法找不到释义，只能用蹩脚的英语去翻文档规范，第二是浏览器和编译器对HTML5 还是很好，第三是自己粗心和浮躁的毛病没有一点点改变。

看着 W3School 教程 (http://www.w3school.com.cn/html5/html_5_draganddrop.asp) 开始学习。

附上一个HTML5 事件的地址(http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp) 也是 W3School 的

开始上代码。

目录结构

js 文件

/*event.preventDefault() 来避免浏览器对数据的默认处理;*//** event.target 返回触发此事件的元素（事件的目标节点）* event.dataTransfer 对象 ， 拖拽对象时发送数据和值。* event.dataTransfer 对象，有2个方法* event.dataTransfer.setDate(arg1,ag2)  拖拽时 设置对象数据和值* arg1 参数 为 String   指定被拖动数据的类型 ,参数值为”Text“ 和"url"* arg2 参数 为 一个变体类型参数，指定被拖动的数据。该数据可以是文本，图片。* event.dataTransfer.setDate(arg1)  得到拖拽数据的 数据。* arg1 为 String   指定被拖动数据的类型 ,参数值为”Text“ 和"url"*
*/// 当开始拖拽时,设置拖拽对象，发送数据和值
function onDrag(ev){ev.dataTransfer.setData("Text",ev.target.id);
}//当拖拽中
function  drag(ev){ev.preventDefault();//获得拖拽的数据var obj =ev.dataTransfer.getData("Text");//得到拖拽的对象，并追加到当前事件对象的子节点
    ev.target.appendChild(document.getElementById(obj));
}// 拖拽结束时
function overDrag(ev){ev.preventDefault() ;
}

<!DOCTYPE html>
<html ><head><script type="text/javascript" src="../js/Drag.js"></script></head><body style=""><div  style="border:1px solid yellow;height: 500px; width: 500px;position:relative;" id="dv1"><div style="border:1px solid red;height: 200px; width: 200px;float: left;margin-top: 10px;margin-left: 10px;" id="dv2"><img id='img1'  draggable="true" ondragstart="onDrag(event)"   src="../img/a.jpg"/ ></div><div id ='dv3' ondrop="drag(event)" ondragover="overDrag(event)" style="border:1px solid blue;height: 200px; width: 200px;margin-top: 10px;margin-right: 10px; float: right;"></div></div></body>
</html>

运行效果：

拖拽前

拖拽后

2点开始看教程，弄清每一个方法，每一个事件，大概到3点左右，之后开始编码。到6点完成。中间调试到了2个小时左右，期间粗心的问题不说，唯一个比较致命的问题没有给<img> 标签加id

 <img  draggable="true" οndragstart="onDrag(event)"   src="../img/a.jpg"/ >

　　这样行代码中没有为 <img> 标签加ID, 为什么没有加ID 会错，来看这行JS代码

function  drag(ev){ev.preventDefault();//获得拖拽的数据var obj =ev.dataTransfer.getData("Text");//得到拖拽的对象，并追加到当前事件对象的子节点ev.target.appendChild(document.getElementById(obj));
}

　因为它需要得到对象ID的，并追加到当前事件对象中。

转载于:https://www.cnblogs.com/skywing/p/3220634.html

学习HTMLT5_1 拖拽相关推荐

jquery UI 跟随学习笔记——拖拽（Draggable）
jquery UI 跟随学习笔记--拖拽(Draggable) 引言这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI 插件,以及jquery库学习 ...
2018年首篇，带大家一起学习视图拖拽功能的源码
今天的快讯我们对2017年的重大事件进行一下回顾吧. 乐视事件回溯乐视的2017,"眼看他起朱楼,眼看他宴宾客,眼看他楼塌了".乐视历经了来自融创中国百亿融资.高层相继离职.裁员 ...
gamemaker学习笔记:拖拽
今晚尝试一下Gm的拖拽,发现和之前看过知乎Gms的专栏一篇文章的也是很类似,尝试做一下练习.针对一个obj在step 事件下进行控制. 在使用之前封装了一个小脚本,可以调用点击.其实有点需要吐槽的,按 ...
Angular 学习笔记——拖拽
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
Android学习系列(10)--App列表之拖拽ListView(上)
研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨. 鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. ...
Bootstrap学习笔记之Nestable可拖拽树结构
Nestable是基于Bootstrap的一个可拖拽的树结构表现插件. 下面粗略的介绍一下它的用法,只作为学习参考,如有不合适之处,请各位凑合看. 下图是我在现在系统中用到的Nestable,对系统模 ...
Android学习系列(11)--App列表之拖拽ListView(下)
接着上篇Android学习系列(10)--App列表之拖拽ListView(上)我们继续实现ListView的拖拽效果. 7.重写onTouchEvent()方法. 在这个方法中我们主要是处 ...
[QT_015]Qt学习之基于条目控件的自定义特性（拖拽+右键菜单+样式）
本文转自:<Qt编程指南> 作者:奇先生 Qt编程指南,Qt新手教程,Qt Programming Guide 本节介绍基于条目控件的定制特性,首先介绍条目的拖拽,列表控件. ...
JavaScript学习第十六天（键盘事件、表单事件、拖拽事件、框架事件、媒体事件）
文章目录键盘事件表单事件剪贴板事件拖拽事件打印事件框架事件媒体事件总结键盘事件 onkeydown 键盘按下事件,当有按键按下时触发 onkeyup 键盘松开事件,当有按键被松开时触 ...
html5学习(鼠标跟随和拖拽)
温故知新,以下是我以前写的html5的案例,从电脑中翻出来了,算是知识复习和回顾吧! 有图有代码! <!DOCTYPE html> <html> <head> &l ...

学习HTMLT5_1 拖拽

学习HTMLT5_1 拖拽相关推荐

最新文章

热门文章