1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>拖放API</title>
  6.      <style>
  7.         [id='dragme']{
  8.              width: 100px;
  9.              height: 100px;
  10.              color: #fff;
  11.              text-align: center;
  12.              line-height: 100px;
  13.              background-color:#aaa;
  14.              user-select: none;
  15.              cursor:pointer;
  16.         }
  17.         [id='text']{
  18.              width: 300px;
  19.              height: 300px;
  20.              margin-top: 20px;
  21.         }
  22.         .border{
  23.              border: 1px solid #aaa;
  24.              border-radius:.2em;
  25.              box-shadow:2px 2px 3px #aaa;
  26.         }
  27.         .hide{
  28.              display: none;
  29.         }
  30.      </style>
  31.  </head>
  32.  <body>
  33.      <div class="content">
  34.          <div class="border" id="dragme" draggable="true">请拖放</div>
  35.          <div class="border" id="text"></div>
  36.      </div>
  37.      <script>
  38.          var page = {
  39.              init : function(){
  40.                  this.draggable();
  41.                  this.perDefault();
  42.              },
  43.              draggable : function(){
  44.                  var source    = document.getElementById('dragme'),
  45.                      dest      = document.getElementById('text'),
  46.                      dragIcon  = document.createElement('img'),
  47.                      n         = 1;
  48.                  dragIcon.src = '';
  49.                  //拖放开始
  50.                  source.addEventListener('dragstart', function(ev){
  51.                      //向dataTransfer追加数据
  52.                      var dt = ev.dataTransfer;
  53.                      dt.effectAllowed = 'all';
  54.                      dt.setData("text/plain", n);
  55.                      //自定义拖放图标
  56.                      dt.setDragImage(dragIcon, -10, -10);
  57.                  },false);
  58.                  //拖放结束
  59.                  dest.addEventListener('dragend', function(ev){
  60.                      ev.preventDefault();
  61.                  },false)
  62.                  //被拖放
  63.                  dest.addEventListener('drop', function(ev){
  64.                      n++;
  65.                      //从dataTransfer对象获取数据
  66.                      var dt   = ev.dataTransfer,
  67.                          text = dt.getData("text/plain");
  68.                          dest.textContent += text+'  ';
  69.                          //阻止默认行为(拒绝被拖放)
  70.                          ev.preventDefault();
  71.                          //阻止事件冒泡
  72.                          ev.stopPropagation();
  73.                  },false)
  74.                  //被拖放的元素在本元素范围内移动
  75.                  //dropEffect拖放时的视觉效果/图标
  76.                  dest.addEventListener("dragover", function(ev){
  77.                      var dt = ev.dataTransfer;
  78.                      dt.dropEffect = 'link';
  79.                      ev.preventDefault();
  80.                  },false)
  81.              },
  82.              //设置页面属性，阻止默认行为
  83.              perDefault : function(){
  84.                  document.ondragover = function(e){
  85.                      e.preventDefault();
  86.                  }
  87.                  document.indrop = function(e){
  88.                      e.preventDefault();
  89.                  }
  90.              }
  91.          }
  92.          window.onload = page.init();
  93.      </script>
  94.  </body>
  95.  </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. C# 获取电脑配置信息

    对于软件绑定电脑常用到的方法汇总 public class Computer { public string MyProperty { get; set; } /// <summary> ...

  2. zhifubao

    使用Git的一个优势便是 我们可以自由的切换到其他分支,而不影响主分支的正常开发,每个分支上都是一份完成的可执行代码那么如何创建分支呢, 创建分支有几种方法, 本地分支和远程分支的差别,意义各是什么,

  3. centos命令安装

    1.解决ifconfig命令失效:需要安装net-tools工具 yum install net-tools 2.免密码登录 (1)通过命令,产生公钥信息 ssh-keygen -t rsa 如果提示 ...

  4. Eclipse 配置Tomcat 服务器

    第一部分:eclipse环境下如何配置tomcat 1.下载并成功安装Eclipse和Tomcat 2.打开Eclipse,单击“window”菜单,选择下方的“Preferences” . 选择好自 ...

  5. 【python】面向对象编程之@property、@setter、@getter、@deleter用法

    @property装饰器作用:把一个方法变成属性调用 使用@property可以实现将类方法转换为只读属性,同时可以自定义setter.getter.deleter方法 @property&@ ...

  6. js 对象，数组，字符串，相互转换

    1:对象转换数组 let obj = {'val1':1, 'val2':2, 'val3':3, 'val4':4}; var arr = [] for (let i in obj) { //取键 ...

  7. 仓鼠找sugar

    洛谷P3398 仓鼠找sugar 题目传送门 参考 \(whm\) 大佬的博客 这儿 代码不难,难在思路上. 令 \(X = lca(a,b) Y = lca(c,d)\) 仓鼠 \((cs)\) 的 ...

  8. Java 关于类的构造方法的一点认识

    2019年4月21日 星期天 在ORACLE官网上提供的The Java™ Tutorials中,有一节课Providing Constructors for Your Classes(为你的类提供构 ...

  9. nginx实现Ipv6地址解析

    nginx实现Ipv6地址解析 1.nginx实现Ipv6地址解析 [root@ip-10-109-1-47 conf]# cat nginx.conf worker_processes 2; eve ...

  10. springmvc 控制器 读取properties文件

    配置文件app.properties如下: yt.api.url=http://localhost:9000 springmvc.xml 增加配置: <context:property-plac ...