设置标签属性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. Nessus导入Cookie进行Web应用安全扫描

    在不导入Cookie使用Nessus进行扫描的时候,扫描的结果是比较简单的,很多深层的问题无法被扫描出来. 需要我们手动导入Cookie,带着Cookie的状态扫描的结果会更详细更深入,以下是操作步骤 ...

  2. 自动挂载文件/etc/fstab功能详解

    今天看了这篇文章,对于自动挂载中的一些小细节和参数有了更深的理解,所以这次把它摘下来,留做查询 一./etc/fstab文件的作用 1.我们把磁盘手动挂载之后如果不把它写入/etc/fstab这个文件 ...

  3. step by step 之餐饮管理系统七(点菜模块实现)

    好长时间没有更新这个系列了,一是因为这段时间比较忙,有很多事情,二来要学习新的东西,AngularJs,devExpress这两上框架,都是比较有名的框架,先上图: 上面就是用来点菜的界面,左边是已点 ...

  4. WinForm/Silverlight多线程编程中如何更新UI控件的值

    单线程的winfom程序中,设置一个控件的值是很easy的事情,直接 this.TextBox1.value = "Hello World!";就搞定了,但是如果在一个新线程中这么 ...

  5. [UE4]逻辑状态机组件

    逻辑状态机 为了实现对目标状态的控制,以及广播改变状态后的事件,可在蓝图中继续处理不同状态下的行为. 实现过程: 1.继承ActorComponent实现LogicStateMachine: 2.被击 ...

  6. 4.CXF所支持的数据类型

    前言:jdk提供了webService,但为什么使用jdk来开发webService相对少呢? 一个重要原因就是jdk支持的数据类型相对不足,例如Map就不为jdk所支持! CXF支持的数据类型: 基 ...

  7. centos7 zabbix3 install done

    centOS7安装zabbix3.0 一.前提: 现在zabbix出现了3.0版本,服务器端只支持centOS7,客户端和代理可以支持centOS6,实验环境是服务端安装centOS7,客户用cent ...

  8. Django的virtualenv环境搭建

    安装virtualenv好处多多,可以让当前的项目使用单独的类库,实现系统类库的隔离,所以能够自由地控制当前项目类库的版本,不受系统类库的影响:还有其他N多好处. 下面是安装说明和使用示例: 首先安装 ...

  9. C++混合编程之idlcpp教程Lua篇(9)

    上一篇在这 C++混合编程之idlcpp教程Lua篇(8) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相比,工程LuaTutorial7中除了四个文件LuaTutorial7.c ...

  10. 浏览器 onbeforeunload 事件 兼容写法

    window.onbeforeunload = onbeforeunload_handler; function onbeforeunload_handler() { var warning = &q ...