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. js form settimeout

    <html><head><meta charset="utf8"><script type="text/javascript&q ...

  2. 【NOIP2018】 游记

    All ended? [day 0] 一点感觉没有,不过翘掉了早上的课(当然还有前三周的课),然后刚想睡一会儿,就被通知要上车了/难受 在车上玩了一会儿早上下的Super Mario(主要是早上刷了一 ...

  3. # 深入理解Redis（二）——内存管理的建议与技巧

    引语 随着使用Redis的深入,我们不可避免的需要深入了解优化Redis的内存,本章将重点讲解Redis的内存优化之道,同时推荐大家阅读memory-optimization一文. 想要高效的使用Re ...

  4. android开发 设备调试问题

    如果在mac下面用趁机开发android程序,发现不能连接上时就需要进行简单设置即可 先设置Finder为可以显示所有隐藏文件夹: 打开终端,输入如下命令: 显示Mac隐藏文件的命令:defaults ...

  5. 6月10遇到的bug

    3.遇到的BUG        1.@Service(version = "1.0.0", interfaceClass = TransactionItemService.clas ...

  6. SDOI 2018 round2游记

    Day 0 早上起来从北京到济南 住宿环境不错 不过比赛环境怎么这么low啊 而且我在最偏僻的考场中最偏僻的角落里 身边居然是个妹子?! Day1 7:40到的考试地点 发现诸位大佬已经打完板子了or ...

  7. bootstrap 网格布局

    一:基本的网格布局 <div class="container"> <div class="row"> <div class=&q ...

  8. 去除安卓apk中的广告

    一般来说,安卓应用很多免费的apk都是有广告的.尽管我们要坚持尊重开发者,帮帮他们点击广告赚钱来可持续发展,但是有的时候,很多游戏中游戏实在是太影响感觉了,当找不到汉化破解版本的时候,也许需要亲自把它 ...

  9. Python批量添加库搜索路径

    被win10 给坑了,换回Win7. 重装系统后,继续使用Python,Eclipse不用重装,pydev不用重装,只需重装Python2.7.6 X64 for win即可.然后,默认已安装的Pyt ...

  10. （转） Arcgis for js加载百度地图

    http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...