<!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. vue.js学习系列-第一篇

    VUE系列一 简介    vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Mode ...

  2. 如何在submit上运行php文件

    一..把php加入到环境变量 二.在sublmie中新建编译系统 三.添加一下代码,修改成php当前的目录地址,保存在默认的路径下,命名为php.sublime-build { "cmd&q ...

  3. 3种自增ID说明

    自增ID 1.@@identity 所有会话所有表最后一个自增ID 2.IDENT_CURRENT('表名') 所有会话当前表的自增ID 3.SCOPE_IDENTITY() 当前会话所有表最后一个自 ...

  4. nginx Access-Control-Allow-Origin 多域名跨域设置

    2019-1-16 12:24:15 星期三 网站的静态文件(js, css, 图片, 字体等)是在一个单独的域名下的, 为了防止非法访问, 给nginx添加了跨域的控制, 也可以在PHP代码中添加 ...

  5. aptitude与apt-get

    aptitude 与 apt-get 一样,是 Debian 及其衍生系统中功能极其强大的包管理工具.与 apt-get 不同的是,aptitude 在处理依赖问题上更佳一些.举例来说,aptitud ...

  6. Django --- 单表的增删改查

  7. node 创建

    下载 node : 注意选项 ADD PATH 配置环境变量 node -v npm -v 检查创建一个服务器 : //创建一个服务器 127.0.0.1:8888 var http = requir ...

  8. html获取输入框的值

    https://zhinan.sogou.com/guide/detail/?id=316512383339

  9. P2444 [POI2000]病毒

    P2444 [POI2000]病毒 题目描述 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已 ...

  10. table td中的内容过长，显示为固定长度，多余部分用省略号显示

    简单描述:table数据过长,结果顶到下一格,影响了数据的查看 解决办法: 给table 加上style属性   另外 给td加上style标签修饰 <table class="tab ...