目的:实现拖动目标并放置到指定区域。

 

使元素可拖动,涉及到元素的全局属性draggable

<img draggable="true" />

即img元素设置为可拖动。

浏览HTML的Mouse事件属性,需要为img分配ondragstart属性,为div分配ondropondragover属性。

首先需要确定拖动对象,即需要获取被drag元素的数据,这里用到dataTransfer对象的setData方法,设被调用方法名称为drag(ev),则该方法定义如下:

function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}

当draggable数据被drop时,首先drop区域div要允许img被放在此处,这是要用ondragover属性调用一个function,用到方法preventDefault(),设function名为allowDrop(ev):

function allowDrop(ev){
ev.preventDefault();
}

当被拖动元素被drop时,执行drop事件。用到body对象的appendChild方法(即“附加行为”)。用getData()获取“附加”到drop目的地的元素数据,传给ondrop(),此处的数据即先前由setData()获得的img元素数据。设方法为drop:

function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
alert("233");
}

1.dataTransfer对象的getData方法,获取img数据

2.target对象的appendChild方法,附加新获取的img数据到原div元素数据

3.document对象的getElementById方法,

完整代码:

<p>move the picture to the div</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>

<img id="drag1" src="http://www.gbtags.com/gb/laitu/100x100&text=GBtags/efb73e/FFFFFF" draggable="true" ondragstart="drag(event)"></img>

<style type="text/css">
div
{ width:100px;
height:100px;
padding:10px;
border:1px solid #CCC;}
</style> <script>function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
} function allowDrop(ev){
ev.preventDefault();
} function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
alert('Move Successfully!');
}</script>

资料:http://www.jb51.net/shouce/dhtml/objects/DD.html

【html】学习记录-拖放(drag and drop)的更多相关文章

  1. HTML5 之拖放(drag与drop)

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

  2. HTML 5 拖放(Drag 和drop)

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

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

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

  4. HTML5 拖放---drag和drop

    拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true:  例:<div id="div" draggable="true"&g ...

  5. 拖放(Drag和Drop)--html5

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

  6. 在Blazor中实现拖放(drag and drop)

    前言 我在实现一个含有待办列表功能的页面时,发现了一个好看的设计,它将待办分为--"待办","正在进行",和"已完成"三种状态,并且将待办通 ...

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

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

  8. HTML5学习笔记 拖放

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

  9. HTML5 学习05—— 拖放(Drag 和 Drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分.即抓取对象以后拖到另一个位置. 例:将w3cschool图标拖动到矩形框中. <script> function allowD ...

随机推荐

  1. pacemaker+corosync/heartbeat对比及资源代理RA脚本

    一.Pacemaker概念 (1)Pacemaker(心脏起搏器),是一个高可用的群集资源管理器.它实现最大可用性资源管理的节点和资源级故障检测和恢复,通过使用首选集群基础设施(Corosync或He ...

  2. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  3. 【2016-11-6】【坚持学习】【Day21】【子窗口关闭时,同步关闭它的主窗口(方法二)】

    根据上文,在子窗口设置一个委托.然后在子窗口关闭事件,执行委托实例,然后在主窗口增加监听委托的方法.... 想想,本事关闭事件就是一个特殊的委托.那么干嘛还要特意去声明一个新的呢?多此一举. 于是有下 ...

  4. [No000078]Python3 字符串操作

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- '''Python 字符串操作 string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分 ...

  5. 原生js实现jquery库中部分事件的功能(jquery库封装二)

    继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装:只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高 /** * Crea ...

  6. js中的按键事件

    参考链接:http://blog.csdn.net/zhouziyu2011/article/details/53978293 <input type="text" id=& ...

  7. C# ASP.NET 优化程序性能、降低内存使用、提高程序运行速度

    首先纪念一下今天的股票大跌抓个图,虽然我自己损失不是很大,但是应该大多人都损失不小.也可能有人会继续跳楼,也可能是股市一个新的转折点来了. 接着还是重点关注自己写代码优化的主题吧.软件系统当访问量不大 ...

  8. 分布式服务框架 dubbo/dubbox 入门示例

    dubbo是一个分布式的服务架构,可直接用于生产环境作为SOA服务框架. 官网首页:http://dubbo.io/ ,官方用户指南 http://dubbo.io/User+Guide-zh.htm ...

  9. 《Java程序设计与数据结构教程(第二版)》学习指导

    <Java程序设计与数据结构教程(第二版)>学习指导 欢迎关注"rocedu"微信公众号(手机上长按二维码) 做中教,做中学,实践中共同进步! 原文地址:http:// ...

  10. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...