<!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. L1-Day10

    1.你需要的是更多的练习.[我的翻译]That you need is more practice.[标准答案]What you need is more practice[对比分析]主语从句用Tha ...

  2. zip4j压缩

    使用的jar包:zip4j_1.3.2.jar 基本功能: 针对ZIP压缩文件创建.添加.分卷.更新和移除文件 (读写有密码保护的Zip文件) (支持AES 128/256算法加密) (支持标准Zip ...

  3. window下安装 node ，并搭建 vue 项目

    uname -a  命令查看到我的Linux系统位数是64位(备注:x86_64表示64位系统, i686 i386表示32位系统) window下安装node 1.在官网上选择对应的位数的msi安装 ...

  4. java学习笔记09-类与对象

    物以类聚,人以群分,我们把具有相似特性或品质的物体归为一类. 类:类是一种模板,它描述一类对象的行为和状态. 对象:对象是类的一个实例,有状态和行为. 比如在一支nba球队中,每个球员都有球衣号码,场 ...

  5. 【C++11】unoedered_map和map（部分转载）

    1.结论 新版的hash_map都是unordered_map了,这里只说unordered_map和map. 运行效率:unordered_map最高,而map效率较低但提供了稳定效率和有序的序列. ...

  6. Python教学课程分享

    一．Python基本语法 1.1整数,实数,复数 前言: Python编程环境及方法 在python底层环境中唤醒python对话,直接在python中输入指令对系统进行命令编程 随意打开一个记事本或 ...

  7. linux安装lamp环境(linux+apache+mysql+php)

    源码安装 本次使用 Centos7.2 MySQL5.7.22 Apache2.4.37 PHP5.6.38 安装Apache 安装httpd和所需依赖:gcc, apr, apr-util,apr- ...

  8. java 静态代理模式

    package proxy.staticproxy; public interface IStar { public void sing(); } package proxy.staticproxy; ...

  9. Redis数据类型Set

    Redis的SET是无序的String集合,它里面的元素是不会重复的. SADD,SMEMBERS SADD命令会添加新元素到SET,可以看到一次性可以添加一个或多个元素.SMEMBERS可以获取se ...

  10. angular2报错

    1.运行ng serve的时候卡在95% emitting LicenseWebpackPlugin 放弃使用cnpm,使用yarn 删除node_modules (不需要删除project目录重新n ...