<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>拖放API</title>

     <style>

        [id='dragme']{

             width: 100px;

             height: 100px;

             color: #fff;

             text-align: center;

             line-height: 100px;

             background-color:#aaa;

             user-select: none;

             cursor:pointer;

        }

        [id='text']{

             width: 300px;

             height: 300px;

             margin-top: 20px;

        }

        .border{

             border: 1px solid #aaa;

             border-radius:.2em;

             box-shadow:2px 2px 3px #aaa;

        }

        .hide{

             display: none;

        }

     </style>

 </head>

 <body>

     <div class="content">

         <div class="border" id="dragme" draggable="true">请拖放</div>

         <div class="border" id="text"></div>

     </div>

     <script>

         var page = {

             init : function(){

                 this.draggable();

                 this.perDefault();

             },

             draggable : function(){

                 var source    = document.getElementById('dragme'),

                     dest      = document.getElementById('text'),

                     dragIcon  = document.createElement('img'),

                     n         = 1;

                 dragIcon.src = '';

                 //拖放开始

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

                     //向dataTransfer追加数据

                     var dt = ev.dataTransfer;

                     dt.effectAllowed = 'all';

                     dt.setData("text/plain", n);

                     //自定义拖放图标

                     dt.setDragImage(dragIcon, -10, -10);

                 },false);

                 //拖放结束

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

                     ev.preventDefault();

                 },false)

                 //被拖放

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

                     n++;

                     //从dataTransfer对象获取数据

                     var dt   = ev.dataTransfer,

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

                         dest.textContent += text+'  ';

                         //阻止默认行为(拒绝被拖放)

                         ev.preventDefault();

                         //阻止事件冒泡

                         ev.stopPropagation();

                 },false)

                 //被拖放的元素在本元素范围内移动

                 //dropEffect拖放时的视觉效果/图标

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

                     var dt = ev.dataTransfer;

                     dt.dropEffect = 'link';

                     ev.preventDefault();

                 },false)

             },

             //设置页面属性，阻止默认行为

             perDefault : function(){

                 document.ondragover = function(e){

                     e.preventDefault();

                 }

                 document.indrop = function(e){

                     e.preventDefault();

                 }

             }

         }

         window.onload = page.init();

     </script>

 </body>

 </html>

H5 _拖放使用的更多相关文章

  1. h5 简单拖放

    最新的HTML5标准为所有的html元素规定了一个draggable属性,它表明了元素是否可以拖动,默认情况下,图像,链接,选中的文字是可以拖动的,因为他们的draggable属性被自动设置为true ...

  2. 【02】一个实现h5的拖放的整个过程-魔芋

    [02]拖放的整个过程-魔芋   01,创建2个元素,一个为拖放元素dragEle,一个是存放的元素targetEle.添加一些样式.   <div class="dragEle&qu ...

  3. h5的拖放（drag和drop）

    被拖曳元素发生的事件=== ondragstart:拖拽元素开始被拖拽的时候触发 ondragend:拖拽完成后触发 目标元素发生的事件=== ondragenter:拖曳元素进入目标元素的时候触发 ...

  4. H5 _浏览器通知功能使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. H5 拖放事件详解

    拖放事件 H5的拖放事件提供了多个接口: 1.drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2.dragend:当拖动操作结束时触发(通过释放鼠标按钮或者点击转 ...

  6. 多个tab切换传参

    var _ =peopleslive.h5; _.main=function(){ //集赞排名1 $('#tab1 .tab_nav').find('li').click (function() { ...

  7. h5drag事件

    在拖动目标上触发事件 (源元素):ondragstart - 用户开始拖动元素时触发ondrag - 元素正在拖动时触发ondragend - 用户完成元素拖动后触发释放目标时触发的事件:ondrag ...

  8. js 2017

    JS面向对象 <script> function num(val) { return val * 8 } function Index(name, age) { this.name = n ...

  9. 我拖拖拖--H5拖放API基础篇

    不要搞错,本文不是讲如何拖地的.看过<javascript精粹>朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了.最近在园子见 ...

随机推荐

  1. 命名空间的using声明

    using声明具有如下的形式: using namespace::name; 一旦声明了上述语句,就可以直接访问命名空间中的名字: #include<iostream> //using声明 ...

  2. C#创建控制台项目引用Topshelf的方式，部署windows服务。

    上一篇是直接创建windows service服务来处理需求.调试可能会麻烦一点.把里面的逻辑写好了.然后受大神指点,用Topshelf会更好一些. 来公司面试的时候问我,为什么要用stringbui ...

  3. 备考2019年6月份PMP考试-分享一些（备考）考试心得

    I'm iron man,纪念离去的钢铁侠(复联4) 话说任何一个写程序的人都不可能干一辈子(有些人例外),大部分都是要转行的. 技术转管理是一条路,技术转创业是一条路,技术干销售是一条路,技术转售前 ...

  4. VS code 代码高亮

    因为平时经常切换笔记本.家里台式机.工作台式机用 VS code,遂发现笔记本中的 javascript 不像台式机中对象和方法语法高亮,只有简单的关键词高亮.后来找到原因系主题设置.[文件]-[首选 ...

  5. .Net ABP 框架 service 无法访问

    最近在看ABP框架,按照文档写好service后,怎么也访问不到,后来发现,忘记把service类设置为public的了! 不写public ABP框架就不能将这个service映射为controll ...

  6. android app 的插件化、组件化、模块化开发-2

    Android 插件化 ——指将一个程序划分为不同的部分,比如一般 App的皮肤样式就可以看成一个插件 Android 组件化 ——这个概念实际跟上面相差不那么明显,组件和插件较大的区别就是:组件是指 ...

  7. 以慕课网日志分析为例-进入大数据Spark SQL的世界

    下载地址.请联系群主 第1章 初探大数据 本章将介绍为什么要学习大数据.如何学好大数据.如何快速转型大数据岗位.本项目实战课程的内容安排.本项目实战课程的前置内容介绍.开发环境介绍.同时为大家介绍项目 ...

  8. app个推（透传消息）

  9. linux yum提示Loaded plugins: fastestmirror, security错误的解决方法

    别听网上的,先检查自己是不是打错了.........我就是打错了一个横杆搞了一个多小时 具体: 如图这种,长横杆 修改后结果: 所以在不知情的情况之下千万不要乱改东西,先检查代码是否有误 题外话: = ...

  10. 安装jar包到maven仓库

    1)将所要安装的jar包放在自定义目录下. 2)(maven环境变量配置无误的情况下)windows环境下,打开命令提示符,输入如下命令: mvn install:install-file -Dfil ...