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. bzoj3436: 小K的农场（差分约束)

    3436: 小K的农场 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1575  Solved: 690[Submit][Status][Discus ...

  2. 【寒假集训系列DAY.1】

    Problem A. String Master(master.c/cpp/pas) 题目描述 所谓最长公共子串,比如串 A:“abcde”,串 B:“jcdkl”,则它们的最长公共子串为串 “cd” ...

  3. Java中的常用类有哪些

    1NumberFormat 2DecimalFormat 3BigDecimal 4Math 5Random 6DateFormat 7SimpleDateFormat 8Calendar 9Date ...

  4. Java 类加载器及加载Class字节码

    参考来源:http://www.cnblogs.com/fingerboy/p/5456371.html       java笔记--理解java类加载器以及ClassLoader类 参考来源:htt ...

  5. bug，实现类未找到service

  6. SQLServer2008 关于Having

    转自百度百科 与where 相比 HAVING 子句对 GROUP BY 子句设置条件的方式与 WHERE 子句和 SELECT 语句交互的方式类似. WHERE 子句搜索条件在进行分组操作之前应用: ...

  7. Asp.net MVC4 Step By Step（5）-使用Web API

    Web API是ASP.net MVC4新增的一个特色, 应用于处理Ajax请求, 他同时使用了Web标准规范, 比如Http, Json,和XML,以及一系列构建REST数据服务的参考原则, 和AS ...

  8. Android 第一行代码（第二版）分享

    今天从网上好不容易看到了别人转发的pdf版的 第一行代码通过下载我把它存在了百度云里面了与大家共享 http://pan.baidu.com/s/1bRztF4

  9. js---html元素操作

    思路:创给节点添加一个元素:步骤: 1:创建元素节点 2:创建文本节点 3:将该文本添加到元素上 4:将该元素追加到其他元素上 appendChild() 方法,将新元素作为父元素的最后一个子元素进行 ...

  10. 转：Python结合P有winauto进行windows UI自动化

    https://blog.csdn.net/z_johnny/article/details/52778064