HTML5拖放

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title> HTML5 拖放 </title>

<style type="text/css">

body { margin: 0; padding: 0;}

#tagetDrag { width: 200px; height: 200px; border: 1px #ccc solid;}

#oDrag { width: 100px; height: 100px; border: 1px red solid; background: #f3f3f3;}

</style>

</head>

<body>

<div id="tagetDrag"></div>

<div id="oDrag"></div>

<script type="text/javascript">

    //设置可拖动元素oDrag的draggable属性为true

    var oDragDiv = document.getElementById("oDrag"),otagetDragDiv = document.getElementById("tagetDrag");

    oDragDiv.draggable = 'true';

    //拖动什么，当ondragstart时设置setData()

    oDragDiv.ondragstart = function (ev){

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

    }

    //要放到哪里 ondragover

    otagetDragDiv.ondragover = function (ev){

       ev.preventDefault(); //阻止默认

    }

    //开始放置 ondrop

    otagetDragDiv.ondrop = function (ev){

       ev.preventDefault(); //阻止默认

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

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

    }

</script>

</body>

</html>

HTML5拖放的更多相关文章

  1. HTML5拖放（drag and drop）与plupload的懒人上传

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

  2. HTML5 拖放

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

  3. HTML5拖放API

    拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...

  4. HTML5 拖放及排序的简单实现

    HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...

  5. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

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

  6. 【Demo】HTML5拖放--简单demo

    用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后-------  实现代码: <!DOCTYPE html> ...

  7. HTML5: HTML5 拖放

    ylbtech-HTML5: HTML5 拖放 1.返回顶部 1. HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分.   将 RUNOOB.C ...

  8. html5 拖放学习

    html5拖放 需要有可拖放元素,可放置的位置(可多个),就像是一个苹果,多个箱子,苹果可以在箱子间来回放置,同样元素也可在多个可放置位置间来回拖放. 如果只有一个位置,元素只可被从原位置托放置唯一目 ...

  9. HTML5拖放事件（Drag-and-Drop,DnD）

    拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target ...

随机推荐

  1. HDOJ 2073 无限的路

    Problem Description 甜甜从小就喜欢画图画,最近他买了一支智能画笔,由于刚刚接触,所以甜甜只会用它来画直线,于是他就在平面直角坐标系中画出如下的图形: 甜甜的好朋友蜜蜜发现上面的图还 ...

  2. 数据结构——N皇后放置方法种数

    Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是,对于给定的N,求出有多少种合 ...

  3. Ubuntu中Nginx的安装与配置

    原文地址:http://www.cnblogs.com/languoliang/archive/2013/04/01/nginx.html 1.Nginx介绍 Nginx是一个非常轻量级的HTTP服务 ...

  4. expresscalculate

    //本程序接受任意含有+.-.*./和()的数值表达式,数值允许带小数,输入以#结束.如:((2.4+3.5)*2-(2+3.5)/2)*(2+3)# #include <stdio.h> ...

  5. kNN

    传统的kNN模型 为了获得用户对产品的评分预测值,kNN模型一般包括以下三步: 1.计算相似度 这步中计算每对产品之间的相似度 Person correlation: \[S _ {mn} ^{P} ...

  6. Codeforces Round #333 (Div. 1)--B. Lipshitz Sequence 单调栈

    题意:n个点, 坐标已知,其中横坐标为为1~n. 求区间[l, r] 的所有子区间内斜率最大值的和. 首先要知道,[l, r]区间内最大的斜率必然是相邻的两个点构成的. 然后问题就变成了求区间[l, ...

  7. SRM 406(1-250pt, 1-500pt)

    DIV1 250pt 题意:有几家宠物店,vecort<int>A表示每家宠物店含有小狗占小狗总数的百分比.现在要做扇形统计图统计每家店的小狗百分比,如下图,问作出来的扇形统计图中最多含有 ...

  8. Java EL 详细用法讲解

    本文主要介绍了Java EL的语法结构以及EL的使用方法,并结合例子代码讲解了Java EL对象.Java EL运算符以及Java EL函数.希望对Java开发者有所帮助. 一.EL简介 1.语法结构 ...

  9. Apache-Tika解析HTML文档

    通常在使用爬虫时,爬取到网上的文章都是各式各样的格式处理起来比较麻烦,这里我们使用Apache-Tika来处理HTML格式的文章,如下: package com.mengyao.tika.app; i ...

  10. php同时循环两个数组

    <? $yurl=$row[yurl]; $yurl_name=$row[yurl_name]; $var=explode("|",$yurl); $var2=explode ...