首先看如下代码
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:200px;height:200px;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>
<p>请把 W3School 的图片拖放到矩形中:</p>
<div id = "div1" ondragover = "allowDrop(event)" ondrop = "drop(event)"></div> <br/> <br/><br/><br/><br/>
<img id = "img1"src = "resource/9.jpg" ondragstart = "drag(event)" draggable = "true" /><br/>
</body>
</html>
我在实现时犯了个错误:
缺少了<!DOCTYPE HTML>,那么这个<!DOCTYPE HTML>和类似的 <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">有什么作用呢。
该标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。如果页面中没有他,就会用浏览器本身的解析标准,这样会造成页面在不同的浏览器(IE、火狐等)可能出现不同的显示效果。
而<!DOCTYPE HTML>是HTML5的解析标准,html5的doctype就是这样写的,并且现代浏览器都认识它。如果我们不使用它就使用了浏览器去解析这些HTML5标签,所以显然不能识别这些拖放操作,代码就不能正常工作了。可参考
http://i.wanz.im/2010/05/28/why_doctype_html/
总结,如何实现拖放呢?一共有四个部分需要实现,第一对于图片设定其可拖放,第二,对于该图片,定义当元素被拖放后发生什么,往往是把该元素的id通过DHTML的dataTransfer属性的setData方法和一个类型进行绑定。等放置的时候就通过这个类型找到这个元素,随后把他当做子元素加入到拖放地中。第三,通过ondragover定义拖放到哪里,也就是标签中含有ondragover属性代表图片等可以被拖放到这里。第四,定义拖放最后的放置的函数。上面也说了,通过getData方法找到拖放的元素ID,然后调用XML DOM的添加节点的方法appendChild将拖放的元素放置在这里。
分享到:
相关推荐
HTML5 新增的一些新标签除了不仅仅是更具语义的 <div> 标签的替代品,并不提供额外的功能。这些都是新增的标签:、、、、<header>,、、、、<figure> 和 。 这些标签被除了IE 外的所有现代浏览器(Firefox 3+、...
第15章 HTML 5中的文件与拖放 280 视频讲解:40分钟 15.1 选择文件 281 15.1.1 通过file对象选择文件 281 15.1.2 使用blob接口获取文件的类型与大小 282 15.1.3 通过类型过滤选择的文件 283 15.2 ...
ImagerJs是一个JavaScript库,用于使用拖放功能上传图像。 上传之前,请裁剪,旋转,调整大小或缩小图像。 它是一个非常易于使用的,独立于平台的,基于WebJavaScript图像上载器。 :warning: 注意力 该库不再维护...
注意:5.x版是重要的重写。 在版本5.x中,该插件代码已进行了改进,以增强的文件管理,可恢复的块上载支持以及其他新功能。 您可以浏览各种封闭的增强功能和特性,并记录在。 注意: bootstrap-fileinput起,用于...
由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop)。当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单。 实现的效果如下: 第一步是先了解H5拖放的相关属性,MDN上有详细...
基本绘图应用程序 - HTML 版本这是为开发的简单绘图应用程序,... 拖放是使用 HTML5,允许用户将形状从形状列表拖到另一个 Basic Draw 应用程序(包括 Java 和 JavaFx 版本)或将其拖到桌面(Finder/Windows 资源管理器
信息注意:由于时间紧迫和一些新项目,我将不再继续监督该项目或提供... 某些功能(例如通过“拖放”从计算机上载文件到CODEIT文件浏览器)仅适用于Chrome。 CODEIT的服务器部分是使用PHP 5.3.0构建的,可以使用PHP
使用拖放操作来添加新的照片,或对其进行排序。创建文件夹以更好地组织您的相册。使用右键菜单 (上下文菜单)访问最常用的功能,如排序,旋转,编辑或文件夹缩略图选择。在缩略图下方添加说明文字 。 编辑图像 在...
运行时行定制和数据机构—使用ExpressVerticalGrid,其最终用户可以按照他们的商业需要,使用简单的拖放功能来添加和删除行,以此来控制控件的外观。并可以轻而易举地创建新的数据分类。 为每一个VerticalGrid行添加...
它还提供了一些(可选)功能,例如防止html输入和粘贴或换行。 它是由漂亮的(但受设计限制)显示的 。 与vue-contenteditable-directive相反,此插件完全支持v-modelReact性。 3.0.0版中的新功能:支持打字稿!...
HTML中的拖放 将数据拖出HTML元素 将数据拖入HTML元素 示例:覆盖默认的HTML拖入行为 在非应用程序HTML沙箱中处理文件放置 放置文件释放 第章:使用菜单 菜单基础知识 创建本机菜单(AIR) 关于HTML中的上下文菜单(AIR)...
运行时行定制和数据机构—使用ExpressVerticalGrid,其最终用户可以按照他们的商业需要,使用简单的拖放功能来添加和删除行,以此来控制控件的外观。并可以轻而易举地创建新的数据分类。 为每一个VerticalGrid行添加...
排序,创建,编辑,删除,复制/粘贴,拖放选项卡中的项目 为项目添加注释或标签 具有可自定义命令的系统范围快捷方式 使用快捷方式或从托盘或主窗口粘贴项目 完全可定制的外观 高级命令行界面和脚本 忽略从...
易于使用内联和对话编辑器,面向对象的主菜单,上下文菜单,多语言支持,拼写检查器,属性面板,拖放功能,热键,批量执行选项,发布,共享和可选择的偏好; 即使没有完全匹配(例如“setup”=“设置”或“flie”=...
注意:本源代码共有20章节,分五部分上传,名称分别为:明日科技《C#示例源代码》(1-4)、明日科技《C#示例源代码》(1-4)、明日科技《C#示例源代码》(5-8)、明日科技《C#示例源代码》(9-12)、明日科技《C#...
并随意使用收到的文件所有这些都是通过利用HTML5特定的功能,并应用一些聪明的技巧(我认为)以及有时我从一些参考文章中学到的技巧性技巧获得的,这些技巧在下面的“参考”部分列出。 不需要外部依
指定水印:包括文字水印和图片水印,内置个性化水印和常用水印位置,也可自由拖放自定义水印及其位置。 5.指定边框:内置大量边框,也可自定义批量添加符合要求的边框文件。 6.输出设置: 注意每次批量操作时需更改...
通过提供对预览各种文件(即图像,文本,html,视频,音频,flash和对象)的支持,它进一步增强了文件输入功能。 此外,它还包括基于AJAX的上载,拖放文件,查看上载进度以及有选择地预览,添加或删除文件。 注意...
13、注意 16 14、WCM高级搜索参数 16 ADVANCED WCM/WEBSPHERE PORTAL SEARCH INTEGRATION 17 Introduction 17 How to search WCM content using this metadata 18 Specific example 21 15、高级参数二 32 16、搜索...