设置标签属性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. JS无刷新分页插件

    本文介绍一个本人自己写的一JS分页插件 <script src="/Js/smart.page.min.js" type="text/javascript" ...

  2. 【Android UI】Android ListView详解

    在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示.抽空把对ListView的使用做了整理,并写了个小例子,如下图. 列表的显示需要三 ...

  3. 【转】Python中的赋值、浅拷贝、深拷贝介绍

    这篇文章主要介绍了Python中的赋值.浅拷贝.深拷贝介绍,Python中也分为简单赋值.浅拷贝.深拷贝这几种"拷贝"方式,需要的朋友可以参考下   和很多语言一样,Python中 ...

  4. monodevelop 突然莫名其妙的将 warning 全部标记为 error

    这是一个关于 monodevelop 的“坑” 我们在用 monodevelop 编译游戏脚本时, 通常会有一些警告,一般这些警告都是无害的, 不影响游戏运行.可是突然有一天, monodevelop ...

  5. MATLAB不运行也不报错

    今天本来挺激动找到能运行的好几个程序 MATLAB忙到busy也是停不下来 本来不以为然 结果呢 吃了个水果 一杯水都喝下去了 还没结果(⊙o⊙) 这时候解决办法只有一个 Ctrl+c

  6. 游戏Loading中的小提示和Loading动画实现

    学习unity1年多了,工作也1年了,因为工作需要,有几个月没接触unity Ngui啦. 学的还是不踏实.继续努力吧.由于下周就要进行新游戏的开发,这几天熟悉熟悉NGUI,今天按照现在公司以前的项目 ...

  7. android studio打包出现翻译问题

    错误信息: Error:(16) Error: "baidutieba_client_inavailable" is not translated in "en" ...

  8. jquery操作dom

    1访问元素(属性,内容,值,css) 1元素属性(获取,设置,删除) .attr(name) .attr(key, value)  || .attr({key0:value0, key1:value1 ...

  9. linux sort,uniq,cut,wc命令详解

    linux sort,uniq,cut,wc命令详解 sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些 ...

  10. C++的四种cast操作符的区别--类型转换(转)

    转自:     http://welfare.cnblogs.com/articles/336091.html Q:什么是C风格转换?什么是static_cast, dynamic_cast 以及 r ...