设置标签属性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. MYSQL绿色安装过程

    # These are commonly set, remove the # and set as required. basedir = "D:\Program Files\mysql-5 ...

  2. 让fetch也可以timeout

    原生的HTML5 API fetch并不支持timeout属性,习惯了jQuery的ajax配置的同学,如果一时在fetch找不到配置timeout的地方,也许会很纠结.fetch 的配置 API 如 ...

  3. linux下的5个查找命令

    在Linux中,有很多方法可以做到这一点.国外网站LinuxHaxor总结了五条命令,你可以看看自己知道几条.大多数程序员,可能经常使用其中的2到3条,对这5条命令都很熟悉的人应该是不多的. 1. f ...

  4. JS与Jquery学习笔记（一）

    一. Javascript的作用域,大坑! 1. JS作用域奇怪表现之一:预编译 在其他的语言里我们如果使用一个变量在声明其之前,是会报错的,但是在js里面却不一定,比如: function f1() ...

  5. 我的Sharepoint视图的使用

    视图是个很灵活的工具,不过在使用前,为了更好的管理视图,我会将Contribute的权限的视图功能去掉. 普通用户都设为Contribute权限,有增删改操作就行. 这样做主要有三个目的: 1.不能让 ...

  6. 搭建一个SSH项目框架的步骤

    1.导入jar包(38个) 2.配置文件 applicationContext,xml (beans.xml) (数据源.LocalSessionFactoryBean.事务管理器.事务通知.AOP切 ...

  7. JavaScript 基础第四天

    一.前言 昨天我们了解了Js的很重要的一个概念叫做函数,函数就是对于冗余和垃圾代码的一种封装机制.简单的讲就是为了能让程序更好更快的执行我们将一些重复性的代码提取,封装成一个有名字的小盒子,等到我们需 ...

  8. 《理解 ES6》阅读整理：函数（Functions）（四）Arrow Functions

    箭头函数(Arrow Functions) 就像名字所说那样,箭头函数使用箭头(=>)来定义函数.与传统函数相比,箭头函数在多个地方表现不一样. 箭头函数语法(Arrow Function Sy ...

  9. linux的一些小问题

    1.需要使用root权限时提示xxx is not sudoers.... 1).root用户下输入visudo 2).在打开的文件中找到 root ALL=(ALL) ALL,以xxx为用户名,添加 ...

  10. Storm-源码分析- Storm中Zookeeper的使用

    在backtype.storm.cluster.clj中, 定义了storm对于Zookeeper的使用   ClusterState 首先定义操作Zookeeper集群的interface (def ...