海同科技，欢迎您！
就业
培训
资料
职坐标
IT知识库

WEB前端

站
热门城市 全国站>
    其他省市
      搜索
      快速购买 快速购买  >
      icon 400-636-0069

      热门课程

      IT学院

      职坐标首页 IT知识库 WEB前端 HTML5/CSS3
      选择在海同培训： 30 天 1327 名， 今日申请 38 人 IT培训咨询 >>
      3分钟了解基于HTML5的拖动排序
      沉沙 2018-07-16 来源 ： 阅读 1390 评论 0

      摘要：本篇HTML5教程探讨了基于HTML5的拖动排序，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

      HTML5-draggable
      HTML5的新特性，想要拖放某个元素，讲DOM的draggable属性为true，反之不允许拖动。

      draggable属性

      //jsrun.net/ptkKp/edit  

          draggable为true的时候，我们可以试试。当你尝试拖动的时候，会有一个虚影。//jsrun.net/ZtkKp/edit

          draggable为false的时候，尝试拖动的时候，不会出现虚影，直接就是选中文字。

      那么为什么我们draggable设置好了以后，也可以拖动，但是松开鼠标的时候不生效呢？那么我们就要想想我们拖动的时候都发生了什么。

      draggable事件

      ondragstart 元素被拖动时触发
      //jsrun.net/ftkKp/edit 
      我们可以通过target和type看到触发事件的dom节点，以及事件名称

      ondragover 当你拖动时在元素之上触发
      //jsrun.net/QtkKp/edit
      通过例子可以发现，我们拖动上面的元素到下面绿色区域就触发事件

      ondrop 当你进行放置的时候（也就是你拖动，松开按键的时候）
      //jsrun.net/dtkKp/edit 我们会发现ondrop居然没有生效，这个时候我们去看我们上面删除的那句话。我们将它应用进去
      //jsrun.net/ttkKp/edit 加上了ondragover 的阻止默认事件。并且里面多加了个去抖(1秒，超长时长 = = )


      本文由职坐标整理发布，学习更多的HTML5/CSS3相关知识，请关注职坐标WEB前端HTML5/CSS3频道！

      html5教程百度云 html5 css3从入门到精通pdf html5+css3从入门到精通下载
      本文由 @沉沙 发布于职坐标。未经许可，禁止转载。
      喜欢 | 0 不喜欢 | 0
      看完这篇文章有何感觉？已经有0人表态，0%的人喜欢 快给朋友分享吧~
      评论（0）
      后参与评论
      加入IT交流圈
      JAVA工程师交流群 +加入
      大数据架构师交流群 +加入
      人工智能Python交流群 +加入
      WEB/H5前端交流群 +加入
      职坐标公众号
      WEB前端 直通车
      • 索取资料 索取资料 索取资料
      • 答疑解惑 答疑解惑 答疑解惑
      • 技术交流 技术交流 技术交流
      • 职业测评 职业测评 职业测评
      • 面试技巧 面试技巧 面试技巧
      • 高薪秘笈 高薪秘笈 高薪秘笈
      海同师资推荐 更多>>
      黄骈
      黄骈 联系TA
      认证System Analyst，System Architect
      程光淼
      程光淼 联系TA
      精通C、C++等语言、智能芯片开发
      热门就业培训班 更多>>
      【零基础】人工智能+Python全栈开发课程
      【零基础】人工智能+Python全栈开发课程
      人工智能+Python技术风口浪潮
      【零基础】JavaEE高级开发工程师课程
      【零基础】JavaEE高级开发工程师课程
      0基础入学Java课程
      【零基础】大数据与分布式架构师课程
      【零基础】大数据与分布式架构师课程
      培训大数据分布式架构
      HTML5/CSS330天热搜词 更多>>
      html5+css3从入门到精通源码 精通html5和css3 html5css3教程下载 html5+css3从入门到精通pdf html5经典实例 html5+css3从入门到精通如何 html5 css3入门 html5css3从入门到精通视频教程 html5 css3入门到精通 html5css3教程 html5教程技巧 html5零基础教程 html5+css3 html5可以做什么 html5+css3从入门到精通下载 html5从入门到精通 来自微博html5版是什么 html5教程当当 html5从入门到精通pdf html5个人简历模板

      您输入的评论内容中包含违禁敏感词

      我知道了

      助您圆梦职场 匹配合适岗位
      验证码手机号，获得海同独家IT培训资料
      选择就业方向：
      人工智能物联网
      大数据开发/分析
      人工智能Python
      Java全栈开发
      WEB前端+H5

      请输入正确的手机号码

      请输入正确的验证码

      获取验证码

      您今天的短信下发次数太多了，明天再试试吧！

      提交

      我们会在第一时间安排职业规划师联系您！

      您也可以联系我们的职业规划师咨询：

      小职老师的微信号：z_zhizuobiao
      小职老师的微信号：z_zhizuobiao

      版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
      上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
       沪公网安备 31011502005948号    

      关于我们 │ 法律声明 │ 联系我们

      ©2015 www.zhizuobiao.com All Rights Reserved

      208小时内训课程
      在线客服