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. ccf 201803-4 棋局评估 （对抗搜索）

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

  2. UITextField 点击事件 --- 不会触发键盘弹出,触发其他事件的实现。

    今天在做项目的过程中,其中有三个控件: UITextField, UITextView , UILabel, 后来发现个问题:如果什么数据都不回填给textField.text 和 textView. ...

  3. Apache 虚拟主机 配置方法

    打开httpd.conf文件 去掉LoadModule vhost_alias_module modules/mod_vhost_alias.so前面的#号 去掉Include conf/extra/ ...

  4. # --with-http_sub_module模块

    作用: http内容替换 语法 第一种语法: sub_filter string:要替换的内容 替换后的内容 这个模块只能替换第一个匹配的字符串,如果需要匹配全部替换,则用到下面的第三种语法配置 第二 ...

  5. SQLServer外部数据导入--Excel版

    例如要在test表里插入多行数据 假设字段有: ID.Name 首先要有需要导入的数据的Excel A1 对应ID B1 对应Name 选中Excel第一行的空白处,比如C1,在工具栏的函数文本框里输 ...

  6. 在mac上截屏的几种方式

    方法 1: 对屏幕的一部分进行截图 按下Command+Shift+4   方法 2: 对整个屏幕进行截图 按下Command+Shift+3   方法 3: 把截图保存到粘贴板 按下Command+ ...

  7. 1、Visual Studio Code安装及Hello Word

    一.环境初始化 1.下载 Visual Studio Code对应版本安装 2.下载.NET Core 2.0 SDK安装 3.安装Mono Debug   完成后界面如下:       二.创建控制 ...

  8. 个人作业—Alpha测试

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/homework/3338 这个作业要求在哪里 htt ...

  9. sql_3 join

    http://www.cnblogs.com/rush/archive/2012/03/27/2420246.html  

  10. CorelDRAW2019版本下载,CorelDRAW最新版新增功能（全）

    使用CorelDRAW 2019,随时随地进行设计创作.无论您使用的是 Windows 或 Mac,都能在为您的平台量身设计的直观界面中,随心所欲地自由创作.无论您是热衷于像素,执迷于无缝输出或沉浸于 ...