小知识点记录一下：onselectstart,onselect

1.onselectstart

该js方法是用来控制盒中内容是否被允许选中

<head>

  <style>

  #tmp {

    height: 200px;

    background-color: red;

  }

  </style>

</head>

<body>

  <div id="tmp">

    测试测试

  </div>

  <input type="text" id="input1">

</body>

<script>

document.getElementById("tmp").onselectstart = function() {

  return true;

};

document.getElementById("input1").onselect = function() {

  return false;

};

</script>

　 onselectstart,当鼠标mousedown 就开始触发。 return false 表示不允许选中。

2.onselect

在input中的内容被选中后触发

drag&drop

如何启用DnD效果

<div id="drag" draggable="true" style="width:100px;height:50px;background-color:red;">

test

</div>

　

var drag = document.getElementById('drag');

drag.onselectstart = function(){return false;};

// FF下拖拽时，默认不会生成一个被拖拽元素的阴影并跟随鼠标移动

// 需通过e.dataTransfer.setData来启动该效果

drag.ondragstart = function(e){

    e.dataTransfer.setData('text', e.target.innerHTML);

};

　　

关键点： 

1.为触发拖拽的元素添加 draggable="true" 特性，用于启动HTML5的DnD功能（即元素的 dragstart 事件可被触发）

2.在FF下即使添加 draggable="true" 特性，但仅仅会触发 dragstart 事件，但DnD功能并没有被完全打开（拖拽元素时没有任何视觉效果），需要调用 event.dataTransfer.setData('Text','') 彻底开启DnD功能。

draggable属性详解

作用：用于指定标签是否可被拖拽

属性值范围如下：

1.  true ，表示可被拖拽

2.  false ，表示不可被拖拽

3.  auto ，默认值，img和带href属性的a标签则表示可拖拽，其他标签表示不可被拖拽

4. 其他值，表示不可被拖拽

DnD生命周期

1. 被拖拽元素的生命周期

dragstart ：当被拖拽元素开始被拖拽时触发

[a]. event.dataTransfer的大部分设置均在这里配置

[b]. 若调用event.preventDefault()则会阻止拖拽行为，导致后续的拖拽事件不被触发

[c]. 触发dragstart事件后，其他元素的mousemove,mouseover,mouseenter,mouseleave,mouseout事件均不会被触发了

 drag ：当被拖拽元素被拖拽时触发

 dragend ：当拖拽行为结束后触发

2. 目标元素的生命周期

  dragenter ：当被拖拽元素进入目标元素时触发

 dragover ：当被拖拽元素在目标元素上移动时触发

 注意：

[a]. 可以在这里设置dropEffect的值，事件的默认行为是将dropEffect设置为none

[b]. 该事件是被拖拽元素在目标元素上移动一段时间后才触发

[c].事件的默认行为是不允许被拖拽元素在其他元素上释放或放置（即无法触发[drop] 事件需要通过event.preventDefault())来阻止默认行为才能触发后续的drop事件

drop：当被拖拽元素在目标元素上，而且释放鼠标左键时触发

注意：

[a]. 对于外来的被拖拽元素（超链接、文件、图片源）， drop 事件的默认行为是浏览器将当前页面重定向到被拖拽元素所指向的资源上

[b]. 对文档内部的被拖拽元素，IE10+和Chrome下的默认行为是不作为，而FF得默认行为是新打开一个文档用于访问被拖拽元素所指向的资源

整体生命周期

dragstart -> drag -> dragenter -> dragover ->  dragleave  -> drop -> dragend

DnD中最重要的数据传递对象──DataTransfer对象　

1. effectAllowed

作用：用于设置被拖拽元素可执行的操作。

取值范围：

copy ，限定dropEffect的属性值为copy，否则会鼠标指针为禁止样式

link ，限定dropEffect的属性值为link，否则会鼠标指针为禁止样式

move ，限定dropEffect的属性值为move，否则会鼠标指针为禁止样式

copyLink ，限定dropEffect的属性值为copy和link，否则会鼠标指针为禁止样式

copyMove ，限定dropEffect的属性值为copy和move，否则会鼠标指针为禁止样式

linkMove ，限定dropEffect的属性值为link和move，否则会鼠标指针为禁止

all ，允许dropEffect的属性值为任意值

none ，鼠标指针一直为禁止样式，不管dropEffect的属性值是什么

uninitialized ，没有限定dropEffect属性的值，效果和 all 一样。

注意：仅能在 dragstart 事件中设置该属性，其他事件中设置均无效

【b】.dropEffect

作用：用于设置目标元素将执行的操作，若属性值属于 effectAllowed 范围内，则鼠标指针将显示对应的指针样式，否则则显示禁止的指针样式。

取值范围：

copy ：被拖拽元素将被复制到目标元素内，若属于 effectAllowed 范围内时，则鼠标指针显示复制的样式，否则则显示禁止的指针样式。

link ：被拖拽元素将以超链接的形式打开资源，若属于 effectAllowed  范围内时，则鼠标指针显示超链接的样式，否则则显示禁止的指针样式。

move ：被拖拽元素将被移动到目标元素内，若属于 effectAllowed   范围内时，则鼠标指针显示移动的样式，否则则显示禁止的指针样式。

none ：被拖拽元素不能在目标元素上作任何操作，一直显示禁止的指针样式。除了文本框外其他元素的默认值均为none

注意：　　　

　　1. 仅能在 dragover 事件中设置该属性值，其他事件中设置均无效

2. 当显示禁止的指针样式时，将无法触发目标元素的 drop 事件。

方法:

void addElement({HTMLElement} element

添加一起跟随鼠标移动的元素。仅在 dragstart 事件中调用，Chrome37和IE10+不支持该方法；

       void setDragImage({Element} image, {long} x, {long} y) 

       设置拖动时跟随鼠标移动的图片，用来替代默认的元素，若image不是图片元素则会元素临时转换为图片；x用于设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。仅在 dragstart 事件中调用。IE10+不支持该方法；

html5 drap & drop的更多相关文章

  1. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  2. HTML5 drag & drop & H5 DnD

    HTML5 drag & drop H5 DnD https://html5demos.com/ demos https://html5demos.com/dnd-upload https:/ ...

  3. HTML5 drag & drop 拖拽与拖放简介

    DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...

  4. Html5 drag&drop

    下面是一个拖放例子 定义如下的两个div,分别是用于拖放后放置新元素的容器和可拖动的元素: <body> <div id="holder" style=" ...

  5. HTML5 drag & drop 拖拽与拖放

    关键词: 1. draggable:规定元素是否可拖动的,draggable=true可拖动 2. dataTransfer:拖拽对象用来传递的媒介,使用方式:event.dataTransfer 3 ...

  6. HTML5 Drag & Drop

    一定要区分不同事件产生的对象 源元素 属性:draggable = "true" 事件: ondragstart:开始拖拽 ondragend:拖拽结束 目标元素 事件: ondr ...

  7. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  8. HTML5原生拖拽/拖放(drag & drop)详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  9. html5 拖拽(drag)和f放置(drop)

    知识要点 HTML5 (drag&drop) API  (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffe ...

随机推荐

  1. Nagios监控远端的mysql

    工作原理: 利用特定的用户定期访问指定的mysql数据库.当不能访问或连不通时则报警. 1.在生产库上安装nagios插件    安装略    备注:编译完显示一定要有mysql支持,不然没有chec ...

  2. CI 配置验证规则

    //判断表单域,提交表单显示对应的错误信息      $this->load->library('form_validation');      $config = array(      ...

  3. pg_dump 备份与恢复的简单操作

    pg_dump 是一个用于备份PostgreSQL数据库的工具.    该工具生成的转储格式可以分为两种,    脚本  :     其中脚本格式是包含许多SQL命令的纯文本格式  (常用)    归 ...

  4. 完整学习git五git重置

    git重置命令的一个用途就是修改引用的游标指向 1查看git操作日志 git reflog 2查看当前head游标的指向 cat .git/refs/heads/master 3重置和跳转 git r ...

  5. Prince2的七大原则（5）

    [Prince2科普]Prince2的七大原则(5) 按照惯例我们先来回顾一下,PRINCE2七大原则分别是指:持续的业务验证,经验学习,角色与责任,按阶段管理,例外管理,关注产品,剪裁. 第五个原则 ...

  6. [STL]set/multiset用法详解[自从VS2010开始，set的iterator类型自动就是const的引用类型]

    集合 使用set或multiset之前,必须加入头文件<set> Set.multiset都是集合类,差别在与set中不允许有重复元素,multiset中允许有重复元素. sets和mul ...

  7. Python基本概念及零碎知识点

    1.python面向对象 类和对象是面向对象编程的两个主要方面.类创建一个新类型,而对象这个类的实例:这类似于你有一个int类型的变量,这存储整数的变量是int类的实例(对象)把握一点:在python ...

  8. UML实践详细经典教程----用例图、顺序图、状态图、类图、包图、协作图

    面向对象的问题的处理的关键是建模问题.建模可以把在复杂世界的许多重要的细节给抽象出.许多建模工具封装了UML(也就是Unified Modeling Language™),这篇课程的目的是展示出UML ...

  9. Eclipse启动提示Failed to load the JNI shared library JVM.dll

    一.出现了上述问题解决办法 1.查看eclipse.ini文件 看看eclipse环境架构需要的是什么. plugins/org.eclipse.equinox.launcher.win32.win3 ...

  10. Myeclipse 添加server library

    来自网络资料 (1)File->New->Other (2)弹出窗口勾上Show All Wizards,然后在type fiter text那里输入Server,选中server-> ...