设置标签属性draggable="true"将一个标签内的元素拖动到另外一个标签进行显示：

 <!DOCTYPE HTML>

 <html>

 <head>

 <style type="text/css">

 #div1 {width:350px;height:70px;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)

 {

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

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

 ev.preventDefault();

 }

 </script>

 </head>

 <body>

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

 <br />

 <p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。进行测试</p>

 </body>

 </html>

注意：链接和图像标签默认是可拖动的

其它标签默认是不可以推动的

更多详细介绍：http://www.w3school.com.cn/html5/att_global_draggable.asp

效果演示地址：

1、http://www.w3school.com.cn/tiy/t.asp?f=html5_global_draggable

2、http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop

draggable属性设置元素是否可拖动。的更多相关文章

  1. CSS border-right-style属性设置元素的右边框样式

    CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...

  2. zIndex 属性设置元素的堆叠顺序。

    http://www.w3school.com.cn/jsref/prop_style_zindex.asp zIndex 属性设置元素的堆叠顺序. 该属性设置一个定位元素沿 z 轴的位置,z 轴定义 ...

  3. 使用 CSS3 的 box-sizing 属性设置元素大小包含 border 与 padding

    Ø  默认情况下,内部元素(如:input)的宽度或高度,是不会包含元素的边框和内边距的,这时就需要使用 box-sizing 属性设置该元素. Ø  box-sizing 是 CSS3 的属性,可以 ...

  4. vertical-align 属性设置元素的垂直对齐方式。

     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...

  5. none，hidden和opacity="0"设置元素不可见的区别

    none,hidden和opacity="0"均可设置元素为不可见的状态.其中none属于display的属性值,hidden属于visibility的属性值.使用none时元素不 ...

  6. css设置元素垂直居中的几个方法

    最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...

  7. CSS中怎么设置元素水平垂直居中？

    记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

  8. Appium学习实践（二）Python简单脚本以及元素的属性设置

    1.简单的Python脚本 Appium中的设置与Appium学习实践(一)简易运行Appium中的一致 Launch后,执行脚本 #coding:utf-8 import unittest impo ...

  9. white-space 属性设置如何处理元素内的空白

    定义和用法white-space 属性设置如何处理元素内的空白. 这个属性声明建立布局过程中如何处理元素中的空白符.值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的. 默认值: ...

随机推荐

  1. 从程序员到CTO的Java技术路线图 作者：zz563143188

    在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样我们清楚的知道我们大概处于那个阶段和水平. Java程序员 高级特性 反射.泛型. ...

  2. SpringMVC常用注解實例詳解1：@Controller,@RequestMapping,@RequestParam,@PathVariable

    我的開發環境 框架:        springmvc+spring+freemarker 開發工具: springsource-tool-suite-2.9.0 JDK版本: 1.6.0_29 to ...

  3. 用 R 进行高频金融数据分析简介

    作者:李洪成 摘自:http://cos.name/wp-content/uploads/2013/11/ChinaR2013SH_Nov03_04_LiHongcheng.pdf 高频数据 金融市场 ...

  4. <转>C Runtime Library（MSVCRT）来历

    (转载)C Runtime Library(MSVCRT)来历   msvcrt.dll (名称:Microsoft C Runtime Library)提供了printf,malloc,strcpy ...

  5. EOS -- 一种灵巧的系统运行跟踪模块

    EOS到底是什么词的缩写,我猜应该是Error of System.最早接触它,是在UT那会.不过那会它是被设计成一个很大的数组,也没有被包含调用函数和行号,又或是时间,只是些计数.编码时,加减一个E ...

  6. java-android推送

    之前做的推送,考虑了很多,最后因为各个因素,选择了极光的.

  7. 【整理】--【字符设备】分配设备号register_chrdev_region()、alloc_chrdev_region() 和 register_chrdev()

    (1) 分配设备编号,注册设备与注销设备的函数均在fs.h中声明,如下: extern int register_chrdev_region(dev_t,unsigned int,const char ...

  8. LNMP编译安装基于centos7.2

    CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop firewalld.service #停止fir ...

  9. jpa更新数据出错

    在更新表的一条记录时出错,错误为“java.sql.SQLException: Field 'is_del' doesn't have a default value”,表有一个属性isDel为Boo ...

  10. android precelable和Serialization序列化数据传输

    一 序列化原因: 1.永久性保存对象,保存对象的字节序列到本地文件中:2.通过序列化对象在网络中传递对象:3.通过序列化在进程间传递对象. 二 至于选取哪种可参考下面的原则: 1.在使用内存的时候,P ...