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. 图结构练习—BFSDFS—判断可达性（BFS）

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2138 注意该图为有向图,1000个点应该最多有 ...

  2. 模拟Queue(wait/notify)

    BlockingQueue:顾名思义,首先它是一个队列,并且支持阻塞的机制,阻塞的放入和得到数据.我们要实现LinkedBlockingQueue下面的两个方法put和take. put(anObje ...

  3. python 3：str.upper()与str.lower()（使字符串字母全部大写或小写）

    name = "Hello,World! Hello,Python!" print(name.upper()) #字母全部大写 print(name.lower()) #字母全部小 ...

  4. mvp 不错的链接

    http://www.imooc.com/wenda/detail/216700 http://www.cnblogs.com/mybkn/archive/2012/04/12/2443676.htm ...

  5. POJ 3322 Bloxorz I

    首先呢 这个题目的名字好啊 ORZ啊 如果看不懂题意的话 请戳这里 玩儿几盘就懂了[微笑] http://www.albinoblacksheep.com/games/bloxorz 就是这个神奇的木 ...

  6. Rabbit--ack机制

    消息应答时执行一个任务可能需要花费几秒钟,你可能会担心如果一个消费者在执行任务过程中挂掉了. 一旦RabbitMQ将消息分发给了消费者,就会从内存中删除.在这种情况下,如果正在执行任务的消费者宕机,会 ...

  7. Vue2-Editor 使用

    Vue-Editor底层采取的是quill.js,而quill.js采用的是html5的新属性classList,所以版本低于ie10会报错“无法获取未定义或 null 引用的属性‘confirm’” ...

  8. SSIS 无法在 unicode 和非 unicode 字符串数据类型之间转换

    最近在学SSIS,遇到一个问题,把平面文件源的数据导入到EXCEL中. 平面文件源的对象是CSV,读进来的PhoneNumber是 DT_STR 然后倒入Excel 对应列建立的是longtext 一 ...

  9. set statistics profile on实例

    set statistics profile on实例 1.SQL语句实例   SQL 代码   复制 SET STATISTICS PROFILE ON GO SELECT COUNT(b.[Sal ...

  10. 利用string 字符串拷贝

    序言:对于laws的代码,完全从Matlab中转来.其中用到了字符串复制和对比的函数. C++要求: 输入字符串,根据字符串,来确定选择数组,用于下一过程 MatLab代码: (1).文件calLaw ...