<!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. 最新版Kali Linux虚拟机安装Open-vm-tools替代VMware tools

    自从Kali 2.0发布之后,会经常遇到安装vmware tools无法成功,或者提示安装成功了但是仍旧无法进行文件拖拽.复制和剪切的问题. 今天给新电脑装系统,重新下载了最新版,Kali 2017. ...

  2. HNU 2015暑期新队员训练赛2 B Combination

    先转化出求 Cnr中有多少奇数 其实就是 (n 的二进制数中 1 的个数为 k ,则这个奇数为 2 ^ k) 因为数很大, 故要快速求出区间的奇数 然后求 0 – low-1 的奇数, 0- high ...

  3. 安装python的pip模块

    安装python的pip模块 网址https://pypi.python.org/pypi/pip 选择,点击下载 将文件解压到C:\Users\Administrator\AppData\Local ...

  4. STM32L476应用开发之二：模拟量数据采集

    采集模拟量数据在一台一起中是必不可少的功能.在本次实验中我们要采集的模拟量值主要包括氧气传感器的输出以及压力变送器的输出. 1硬件设计 我们需要采集数据对精度有一定的要求,而STM32L476自带AD ...

  5. Oracle管理文件OMF （oracle managed files）

    简化dba的管理操作 1:启用 omf 23:16:04 SYS@orcl> show parameter DB_CREATE_FILE_DEST NAME TYPE VALUE ------- ...

  6. java-pdf转word

    注:原文来至 < java-pdf转word   > 一: java Pdf 文字 转 Word 废话不说,直接上图 很简单的用法:1.new个PDFBox对象2.调用pdfToDoc() ...

  7. 编辑后保留原URl搜索条件

    首先需要知道的一个知识点: 1.request.GET是一个QueryDict类型的,要想取出?后面的结构就用request.GET.urlencode() 2.request.GET默认是不可修改的 ...

  8. select下拉框可以直接取list里的内容 不用非得转map (不得不承认我是个ZZ，这么简单的问题才反应过来，--^--)

    需求描述:select下拉框的填充项,从后台传来的list中获取 自黑一下:之前有篇随笔,写的是通过map传到前台,在前台的select中的value属性取值 用map的key,而select的tex ...

  9. C#概念总结（二）

    1.C#的方法:<access Specifier>  <Return Type>< Method Name>(Parmeter list){     method ...

  10. cf441 f组合数。。单调指针

    e没学过做不出来.. 处理合法的区间很麻烦,但是处理非合法的区间很容易 答案就是所有的取法-不合法的区间 这题一定要双边界推进处理!!!! 一开始用单边界向右推进,结果后来发现错了,拿样例1就可以证明 ...