function init() {

            var source = document.getElementById("dragme");

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

        

            source.addEventListener("dragstart", function(ev) {

   <script type="text/javascript">

                var dt = ev.dataTransfer;

                dt.effectAllowed = 'all';

             

                dt.setData("text/plain", "拖动");

            }, false);

     

            dest.addEventListener("dragend", function(ev) {

          

                ev.preventDefault();

              

            }, false);

          

            dest.addEventListener("drop", function (ev) {

               

                var dt = ev.dataTransfer;

                var text = dt.getData("text/plain");

                dest.textContent += text;

               

                ev.preventDefault();

                ev.stopPropagation();

            }, false);

        }



        document.ondragover = function(e) { e.preventDefault(); };

                    document.ondrop = function(e) { e.preventDefault(); };

</script>

<body onload="init()">

<div id="dragme" draggable="true" style="width: 200px;border: 1px solid gray">请拖放</div>



        <div id="text" style="width: 200px; height: 200px;border: 1px solid gray"></div>



</body>

使用Html5和Js进行拖动的更多相关文章

  1. html5 canvas+js实现ps钢笔抠图

    html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...

  2. html5 canvas+js实现ps钢笔抠图（速抠图 www.sukoutu.com）

    html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)   根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...

  3. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

  4. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  5. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  6. PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  7. 用HTML5+原生js实现的推箱子游戏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  9. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

随机推荐

  1. CentOS7 内核参数优化

    # allow testing with buffers up to 128MBnet.core.rmem_max = 134217728net.core.wmem_max = 134217728# ...

  2. leetcode String相关

    目录 3无重复字符的最长子串 5最长回文子串 8字符串转换整数(atoi), 9回文数,7整数反转 28实现strStr(), 459重复的子字符串(KMP) 43字符串相乘 71简化路径 93复原I ...

  3. javascript必须知道的知识要点（二）

    该文章不详细叙述各知识要点的具体内容,仅把要点列出来,供大家学习的时候参照,或者检测自己是否熟练掌握了javascript,清楚各个部分的内容. 内建对象可划分为数据封装类对象.工具类对象.错误类对象 ...

  4. 使用Github做服务器展示前端页面

    1)在github上创建自己一个项目,项目名称必须是你的github账号名.github.io  譬如 fk123456.github.io 因为我已经创建了,所以显示名字重复. 2)使用命令行的方式 ...

  5. ccf 201803-4 棋局评估 （对抗搜索）

    棋局评估 问题描述 Alice和Bob正在玩井字棋游戏. 井字棋游戏的规则很简单:两人轮流往3*3的棋盘中放棋子,Alice放的是“X”,Bob放的是“O”,Alice执先.当同一种棋子占据一行.一列 ...

  6. 网络流模板(模板题：POJ1273)

    模板题:POJ1273 EK: #include <queue> #include <cstdio> #include <cstring> #include < ...

  7. lsit集合去重复 顶级表达式

    updateList = updateList.Where((x, i) => updateList.FindIndex(z => z.ID == x.ID) == i).ToList() ...

  8. Xcode控制台输出中文

    创建一个.m文件,然后将一下代码加入.m文件中即可实现控制台输出中文,具体代码如下: #ifndef Release @implementation NSSet(Log) - (NSString *) ...

  9. 《CSS Mastery》读书笔记（3）

    第三章 可视化格式模型 三个最重要的CSS概念需要掌握,浮动floating,定位positioning, 框模型(有些书翻译成盒子模型)box model. 这些概念控制了元素在页面中的安放和显示. ...

  10. oracle 命令记录

    监听程序启动停止查看名利: 1.切换到oracle用户:su - oracle 2.查看监听状态:lsnrctl status 3.停止监听:lsnrctl stop 4.启动监听:lsnrctl s ...