<!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. CentOS7离线安装mysql5.7

    下载mysql5.7,系统选择redhat,版本选择RHEL7,下载RPM Bundle后得到一个tar文件.这里得到文件mysql-5.7.25-1.el7.x86_64.rpm-bundle.ta ...

  2. javaFX的控制台实现

    最近做了个javaFX的工具,想弄个控制台输出信息,准备用TextArea来模拟console,但直接操纵console对象的话不依赖这个项目的地方就无法输出信息到控制台了,至于log,以前弄过一个输 ...

  3. 2018-2019-2 20165237《网络攻防技术》Exp1 PC平台逆向破解

    2018-2019-2 20165237<网络攻防技术>Exp1 PC平台逆向破解 一.实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调 ...

  4. 【intern】最长公共子串、编辑距离、KMP 等

    这可能是一个很长的blog…… # from https://blog.csdn.net/justheretobe/article/details/51764587 #!/usr/bin/env py ...

  5. 自动备份远程mongodb数据库并拉取到本地

    自动备份远程mongodb数据库并拉取到本地 目标: 远程服务器 .1中的mongodb数据拉回公司测试服务器中 .远程服务器中编写自动备份mongodb脚本 ①编写脚本 # vim /opt/bac ...

  6. javascript 常用方法 解析URL,补充前导字符

    2018-11-7 20:41:20 星期三 1. 解析URL function parseUrl(url){ url = decodeURIComponent(url); var u = url.s ...

  7. 浅谈《Linux就该这么学》

    就在去年十月份的时候,偶尔在Linux技术群了看到别人分享的<Linux就该这么学>,好奇的就点进去看看,当时看完首页,突然发现刘遄老师说到心坎里去了,于是就仔细看了看红帽认证的讲解以及后 ...

  8. computed计算属性

    在computed中,可以定义一些属性,这些属性 叫做计算属性.计算属性的本质是一个方法,只不过我们在使用的时候,把他们的名称当做属性来使用,并不会吧计算属性当做方法去调用.与methods平级. / ...

  9. 定时任务框架Quartz-(一)Quartz入门与Demo搭建

    注:本文来源于:是Guava不是瓜娃  <定时任务框架Quartz-(一)Quartz入门与Demo搭建> 一.什么是Quartz 什么是Quartz? Quartz是OpenSympho ...

  10. Web前端-网站首页和注册界面的实现

    首页用到的知识如下: 1.bootstrap框架 2.jQuerry实现页面定时弹出广告 注册界面用到的知识: 1.bootstrap框架 2.jQuerry实现省市联动操作 3.jQuerry实现表 ...