<!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初探

    背景 作为常年搞后端的自己来说,除了多年前学习的一点关于HTML的皮毛,对现在的前端技术栈可谓是一窍不通.但是因为最近在做的内部业务全链路监控系统,负责前端的同事做到一半去搞别的项目了,为了把项目落地 ...

  2. L1-Day10

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

  3. Python文本编辑器推荐

    首推当然是Sublime Text:可以中文化,百度上面有教程,页面比较酷炫,功能也不错 然后就是Notepad++,台湾开发,有中文界面

  4. JAVA学习笔记（4）—— 排序算法

    排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作.排序算法,就是如何使得记录按照要求排列的方法. 排序算法大体可分为两种: 一种是比较排序,时间复杂度O(nlogn) ...

  5. C#学习笔记——MDI窗体（多文档界面）

    1.设置父窗体: 如果要将某个窗体设置为父窗体,只需将该窗体的IsMdiContainer属性设置为True即可. 2.设置子窗体: 通过设为某个窗体的MdiParent属性来确定该窗体是那个窗体的子 ...

  6. GraphQL ---02 GraphQL和C#结合的实战项目

    本文章是介绍和记录如何创建GraphQL项目,以及如何使用GraphQL进行数据的相关操作.项目参照GraphQL .Net 的官方文档进行实践 一.项目结构: 为了更好的和原有的项目结合在一起,尽可 ...

  7. python2 使用pip安装psycopg2出现错误：Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-install-mvzdNj/psycopg2/

    公司业务需求,开发语言python2,需要使用数据库:postgresql,需要安装模块psycopg2这个模块, 使用pip install psycopg2 报错: Command "p ...

  8. vue computed、methods、watch的区别

    1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...

  9. SpringCloud使用Feign调用其他客户端带参数的接口，传入参数为null或报错status 405 reading IndexService#del(Integer);

    SpringCloud使用Feign调用其他客户端带参数的接口,传入参数为null或报错status 405 reading IndexService#del(Integer); 第一种方法: 如果你 ...

  10. knn算法详解

    邻近算法,或者说K最近邻(kNN,k-NearestNeighbor)分类算法是数据挖掘分类技术中最简单的方法之一.所谓K最近邻,就是k个最近的邻居的意思,说的是每个样本都可以用它最接近的k个邻居来代 ...