设置标签属性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. android shader 用法

    转自 http://blog.csdn.net/abcdef314159 http://blog.csdn.net/aigestudio/article/details/41799811 Shader ...

  2. DIY操作系统（引文）

    构想根据<30天自制操作系统>以及<ORANGE’S:一个操作系统的实现>初步实现一个操作系统. 先开个头,以后的棋一步一步下.

  3. 初学python第二天

    今天我将用python来编写一款小游戏,用这个来总结一下自己学过的一些基础语法.没错,它就是井字游戏.想想自己第一接触这种游戏,还是小学生呢

  4. Android发展演变与开发环境搭建

    本人也算是一名比较会玩的Android手机用户,常常关注Android发展的最新情况,并且每年都会熬夜看谷歌的I/O大会,总会第一时间刷入最新的Android版本.接下来简单谈一下Android版本的 ...

  5. JavaScript 基础第六天

    一.引言 前面我们介绍了有关于内置对象的很多很多的API,讲道理得话如果想彻底的掌握那一定要经过一定的代码段沉淀下.大家可以想象一下,既然在程序中有很多的内置对象供我们使用,那我们是不是也可以定义一些 ...

  6. iphone 耳机 线控

    有电话呼入时: 按一次接听电话: 快速按两次将电话转到语音信箱: 通话中: 按一次挂断电话: 通话中如果有第二个电话打进来时: 按一次保留当前通话并接听第二个电话: 按住两秒钟不放忽略(拒绝接听)第二 ...

  7. 【leetcode】Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  8. Focus, w/o disturbance

    Focus = Aim + Execution + Persistence Disturbance = Disappointment + Anxiety + Failure

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

    上一篇在这 C++混合编程之idlcpp教程Python篇(7) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程PythonTutorial6中,同样加入了四个文件:Pyt ...

  10. 读《我是IT小小鸟》后有感

    我是一名大一新生,在下半学期开学时,我迎来新课程——<大学生职业生涯规划与就业指导 >.这是一门既新颖,又有许多就业知识和理论的学科.在课上,老师向我们推荐了一本书,名叫<我是IT小 ...