<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <title>通过拖放实现添加、删除</title>

        <style type="text/css">

            div>div{

                display:inline-block;

                padding: 10px;

                background-color: #aaa;

                margin: 3px;

            }

        </style>

    </head>

    <body>

        <div style="width:600px;border:1px solid black;">

            <h2>可将喜欢的项目拖到收藏夹</h2>

            <div draggable="true" ondragstart="dsHandler(event);">勿忘心安</div>

            <div draggable="true" ondragstart="dsHandler(event);">照顾自己</div>

            <div draggable="true" ondragstart="dsHandler(event);">Number 9</div>

            <div draggable="true" ondragstart="dsHandler(event);">崇拜</div>

        </div>

        <div id="dest" style="width:400px;height:400px;border:1px solid black;float:left;">

            <h2 ondragleave="return false;">收藏夹</h2>

        </div>

        <div id="gb" draggable="false" style="width:100px;height:100px;border:1px solid red;float:left;">我是垃圾桶</div>

        <script type="text/javascript">

            var dest = document.getElementById("dest");

            var dsHandler = function (evt){

                evt.dataTransfer.setData("text/plain","<item>"+evt.target.innerHTML);

            }  

            dest.ondrop = function(evt){

                var text = evt.dataTransfer.getData("text/plain");

                if(text.indexOf("<item>") == 0){

                    var newEle = document.createElement("div");

                    newEle.id = new Date().getUTCMilliseconds();

                    newEle.innerHTML = text.substring(6);

                    newEle.draggable = "true";

                    newEle.ondragstart = function(evt){

                        evt.dataTransfer.setData("text/plain","<remove>"+newEle.id);

                    }

                    dest.appendChild(newEle);

                }

            }  

            document.getElementById("gb").ondrop = function(evt){

                alert(2);

                var id = evt.dataTransfer.getData("text/plain");

                if(id.indexOf("<remove>") == 0){

                    var target = document.getElementById(id.substring(8));

                    alert(target);

                    dest.removeChild(target);

                }

            }  

            document.ondragover = function(evt){

                return false;

            }  

            document.ondrop = function(evt){

                return false;

            }

        </script>

    </body>

</html>

HTML5拖放牛刀小试的更多相关文章

  1. HTML5拖放（drag and drop）与plupload的懒人上传

    HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

  2. HTML5 拖放

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 I ...

  3. HTML5拖放API

    拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...

  4. HTML5拖放

    HTML5拖放 <!doctype html> <html> <head> <meta charset="UTF-8"> <t ...

  5. HTML5 拖放及排序的简单实现

    HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...

  6. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  7. 【Demo】HTML5拖放--简单demo

    用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后-------  实现代码: <!DOCTYPE html> ...

  8. HTML5: HTML5 拖放

    ylbtech-HTML5: HTML5 拖放 1.返回顶部 1. HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分.   将 RUNOOB.C ...

  9. html5 拖放学习

    html5拖放 需要有可拖放元素,可放置的位置(可多个),就像是一个苹果,多个箱子,苹果可以在箱子间来回放置,同样元素也可在多个可放置位置间来回拖放. 如果只有一个位置,元素只可被从原位置托放置唯一目 ...

随机推荐

  1. Ubuntu升级GCC到gcc4.8

    http://www.qtcn.org/bbs/apps.php?q=diary&a=detail&did=1456&uid=139371Ubuntu最新gcc版本在ppa:u ...

  2. Float与二进制之间的转化（Java实现）

    在线转化:http://www.binaryconvert.com import java.text.DecimalFormat; public class SinglePrecision { //浮 ...

  3. js——class基础

    js的类?其实还是原型! class Point{ constructor(x, y){ this.x = x; this.y = y; } toString(){ return '(' + this ...

  4. STM32L476应用开发之一：初次使用

    今天终于收到了期待已久的NUCLEO-F412ZG,感谢电子发烧友论坛!多年以来基本都是在STM32平台上做一些设计开发工作.但是低功耗的基本没用过,这次要做便携式设备才对这方面有所接触,正好这时电子 ...

  5. Ubuntu16.04安装JDK8与Tomcat7

      本篇教程在示例步骤中使用了以下版本的软件.操作时,请您以实际软件版本为准. 操作系统:Ubuntu 16.04.3 LTS (GNU/Linux 4.4.0-105-generic x86_64) ...

  6. Confluence 6 诊断

    当你对性能进行诊断或者希望知道是什么原因导致 Confluence 崩溃,你希望知道在 Confluence 内部是什么导致这些问题发生的.这个时候系统的诊断信息能够帮助你获得更多的有关的这些信息. ...

  7. SpringBoot集成多数据源

    多数据源就是连接多个数据库 1.在application.properties中配置两个数据库 spring.datasource.driverClassName=com.mysql.jdbc.Dri ...

  8. 【python】kafka在与celery和gevent连用时遇到的问题

    前提:kafka有同步,多线程,gevent异步和rdkafka异步四种模式.但是在与celery和gevent连用的时候,有的模式会出错. 下面是我代码运行的结果. 结论:使用多线程方式! 使用同步 ...

  9. jenkins 回滚发布

    #jenkins拉取文件路径 workspace=/data/wos/testtemp #备份路径 backspace=/data/wos/back #不能提Git的文件 config=/data/w ...

  10. XMind思维导图使用笔记

    首先新建一个空白的图 以组织结构图(向下)  为例 1.双击组织结构图 创建一个空白的页面 2.随便选择一个风格 这时候出现工作台 现在里面只有一个中心主题 正文部分开始 1.如果想要添加一个子主题 ...