【4858美高梅】深入驾驭javascript原生拖放,HTML5原生拖放实例分析

By admin in 4858美高梅 on 2019年4月28日

HTML五提供了原生拖放功用的JavaScript
API,使用起来很便利。

HTML五提供了原生拖放功用的JavaScript
API,使用起来很有益。

眼下的话

前方的话

  拖放(drag-and-drop,DnD)其实是三个动作——拖和放。所以,它事关到三个因素。1个是被拖的因素,称为拖放源;另贰个是要放的目的,称为拖放目的。本文将透过拆分那七个概念来详细介绍原生拖放

 

兼容性:

兼容性:

  拖放(drag-and-drop,DnD)其实是七个动作——拖和放。所以,它涉及到四个因素。三个是被拖的要素,称为拖放源;另一个是要放的靶子,称为拖放目的。本文将因此拆分那七个概念来详细介绍原生拖放

拖放源

  什么样的元素才是拖放源呢?

  HTML伍为有着HTML成分规定了多个draggable属性,表示成分是不是可以拖动

  图像和链接的draggable属性自动被设置成了true,而其他因素那性格情的暗中认可值都是false

  [注意]非得安装draggable=’true’手艺奏效,只设置draggable不起功用

  私下认可情状下,文本唯有在被入选的意况下才具拖动,而图像和链接在别的时候都足以拖动。而别的因素则不可能被拖放

<input value="文字可拖动">
<img alt="图像可拖动" src="http://files.cnblogs.com/files/xiaohuochai/zan.gif">
<a href="#">链接可拖动</a>
<div id="test" style="height:30px;width:300px;background:pink;">元素不可拖动</div>

  当为因素设置draggable属性后,普通成分也足以拖动

<div draggable="true" style="height:30px;width:100px;background:pink;"></div>

兼容

  IE玖-浏览器不帮助draggable属性,但可透过mousedown事件处理程序调用dragDrop()方法来兑现拖动作效果果

<div id="test"  style="height:30px;width:300px;background:pink;"></div>    
<script>
test.onmousedown = function(){
    this.dragDrop();
}
</script>

  [注意]假设让firefox援救draggable属性,必须增多3个ondragstart事件管理程序,并在dataTransfer对象使用setData()方法来运维功用

拖放事件

  拖放源涉及到三个拖放事件。拖动拖放源时,依次触发dragstart、drag和dragend那二个事件

dragstart

  按下鼠标键并开端运动鼠标时,会在被拖放的要素上触发dragstart事件。此时光标造成“不可能放”符号(圆环中有一条反斜线),表示无法把元素放到自个儿上面

drag

  触发dragstart事件后,随即会触发drag事件,而且在要素被拖动时期会不停触发该事件

dragend

  当拖动结束时(无论是把成分放到了实用的停放目的,仍然放到了不算的放置目标上),会触发dragend事件

<div id="test"  draggable="true" style="height:30px;width:100px;background:pink;">0</div>    
<script>
var timer,i=0;
test.ondragstart = function(){
    this.style.backgroundColor = 'lightgreen';
}
test.ondrag = function(){
    if(timer) return;
    timer = setInterval(function(){
        test.innerHTML =  i++;
    },100)
}
test.ondragend = function(){
    clearInterval(timer);
    timer = 0;
    this.style.backgroundColor = 'pink';
}
</script>

 4858美高梅 1

 4858美高梅 2

 

拖放目的

  拖放目的是指被拖动的成分放开鼠标时被停放的靶子

  拖放源被拖动到拖放目的上时,将顺序触发dragenter、dragover和dragleave或drop那多个事件

dragenter

  只要有元素被拖动到放置目的上,触发dragenter事件

dragover

  被拖动的要素在放置目的的范围内活动时,持续触发dragover事件

dragleave

  假若成分被拖出了放置目的,触发dragleave事件

drop

  假如元素被停放了放置目的中,触发drop事件

  [注意]firefox浏览器的drop事件的私下认可行为是开发被安置放置目的上的U汉兰达L。为了让firefox帮衬正常的拖放,还要撤消drop事件的暗许行为

  私下认可意况下,目的成分是不允许被放置的,所以不会生出drop事件。只要在dragover和dragenter事件中截留暗中认可行为,技艺产生被允许的停放目标,才具容许产生drop事件。此时,光标造成了允许放置的号子

<div id="test"  draggable="true" style="height:30px;width:130px;background:pink;float:left;">拖放源</div>    
<div id="target" style="float:right;height: 200px;width:200px;background:lightblue;">拖放目标</div>
<script>
var timer,i=0;
var timer1,i1=0;
//兼容IE8-浏览器
test.onmousedown = function(){
    if(this.dragDrop){
        this.dragDrop();
    }
}
test.ondragstart = function(){
    this.style.backgroundColor = 'lightgreen';
    this.innerHTML = '开始拖动';
}
test.ondrag = function(){
    if(timer) return;
    timer = setInterval(function(){
        test.innerHTML =  '元素已被拖动' + ++i + '秒';
    },1000);
}
test.ondragend = function(){
    clearInterval(timer);
    timer = 0;i =0;
    this.innerHTML = '结束拖动';
    this.style.backgroundColor = 'pink';
}
target.ondragenter = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    this.innerHTML = '有元素进入目标区域';
    this.style.background = 'red';
}
target.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    if(timer1) return;
    timer1 = setInterval(function(){
        target.innerHTML =  '元素已进入' + (++i1) + '秒';
    },1000);
}
target.ondragleave = function(){
    clearInterval(timer1);
    timer1 = 0;i1=0;
    this.innerHTML = '元素已离开目标区域';
    this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(){
    clearInterval(timer1);
    timer1 = 0;i1=0;
    this.innerHTML = '元素已落在目标区域';
    this.style.backgroundColor = 'orange';    
}
</script>

对于PC端浏览器,Firefox、Chrome、Safari支持美好,而IE和Edge浏览器某个天性不帮助,如IE10和IE11、艾德ge对于dataTransfer.setData(format,data)
,只定义了”text”和”URL”二种有效的数据类型。而HTML五标准允许帮助各类MIME类型。

对于PC端浏览器,Firefox、Chrome、Safari辅助美好,而IE和艾德ge浏览器有个别个性不帮忙,如IE10和IE1壹、艾德ge对于dataTransfer.setData(format,data)
,只定义了”text”和”UPAJEROL”二种有效的数据类型。而HTML5正经允许辅助各样MIME类型。

拖放源

  什么样的因素才是拖放源呢?

  HTML5为有着HTML成分规定了八个draggable属性,表示成分是还是不是能够拖动

  图像和链接的draggable属性自动被设置成了true,而别的因素那特性格的暗中认可值都以false

  [注意]务必设置draggable=’true’技术见效,只设置draggable不起成效

  暗中认可情况下,文本唯有在被入选的情景下才干拖动,而图像和链接在别的时候都足以拖动。而此外因素则不可能被拖放

<input value="文字可拖动">
<img alt="图像可拖动" src="http://files.cnblogs.com/files/xiaohuochai/zan.gif">
<a href="#">链接可拖动</a>
<div id="test" style="height:30px;width:300px;background:pink;">元素不可拖动</div>

  当为因素设置draggable属性后,普通成分也得以拖动

<div draggable="true" style="height:30px;width:100px;background:pink;"></div>

兼容

  IE九-浏览器不支持draggable属性,但可透过mousedown事件管理程序调用dragDrop()方法来贯彻拖动作效果果

4858美高梅 3

<div id="test"  style="height:30px;width:300px;background:pink;"></div>    
<script>
test.onmousedown = function(){
    this.dragDrop();
}
</script>

4858美高梅 4

  [注意]万一让firefox援救draggable属性,必须增多多少个ondragstart事件管理程序,并在dataTransfer对象使用setData()方法来运营作用

拖放事件

【4858美高梅】深入驾驭javascript原生拖放,HTML5原生拖放实例分析。  拖放源涉及到贰个拖放事件。拖动拖放源时,依次触发dragstart、drag和dragend那2个事件

dragstart

  按下鼠标键并开始运动鼠标时,会在被拖放的要素上触发dragstart事件。此时光标形成“无法放”符号(圆环中有一条反斜线),表示不能够把成分放到本人上边

drag

  触发dragstart事件后,随即会触发drag事件,而且在要素被拖动时期会没完没了触发该事件

dragend

  当拖动截至时(无论是把成分放到了卓有功效的放置目的,照旧放到了没用的停放目的上),会触发dragend事件

4858美高梅 5

<div id="test"  draggable="true" style="height:30px;width:100px;background:pink;">0</div>    
<script>
var timer,i=0;
test.ondragstart = function(){
    this.style.backgroundColor = 'lightgreen';
}
test.ondrag = function(){
    if(timer) return;
    timer = setInterval(function(){
        test.innerHTML =  i++;
    },100)
}
test.ondragend = function(){
    clearInterval(timer);
    timer = 0;
    this.style.backgroundColor = 'pink';
}
</script>

4858美高梅 6

dataTransfer对象

  为了在拖放操作时落到实处数据调换,引进了dataTransfer对象,它是事件目的的一个性质,用于从被拖动成分向放置目的传递字符串格式的数据

  dataTransfer对象有八个首要格局:getData()和setData()

  getData()能够拿走由setData()保存的值。setData()方法的第几个参数,也是getData()方法唯一的2个参数,是二个字符串,表示保留的数据类型,取值为”text”或”UPRADOL”

  IE只定义了”text”和”UOdysseyL”二种有效的数据类型,而HTML伍则对此加以扩充,允许钦命各个MIME类型。考虑到向后相当,HTML5也援助”text”和”UXC90L”,但那二种档期的顺序会被映射为”text/plain”和”text/uri-list”

  实际上,dataTransfer对象足以为每一个MIME类型都封存贰个值。换句话说,同时在这么些目标中保留1段文本和一个UXC60L不会有此外难点

  [注意]封存在dataTransfer对象中的数据只可以在drop事件管理程序中读取

  在拖动文本框中的文本时,浏览器会调用setData()方法,将拖动的文书以”text”格式保存在dataTransfer对象中。类似地,在拖放链接或图像时,会调用setData()方法并保存U中华VL。然后,在那几个成分被拖放到放置目的时,就足以经过getData()读到那些多少

<div>请将从这行文字中挑选一些移动到拖放目标中</div>    
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目标</div>
<div id="result"></div>
<script>
target.ondragenter = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    this.innerHTML = '有元素进入目标区域';
    this.style.background = 'red';
}
target.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}
target.ondragleave = function(e){
    e = e || event;    
    this.innerHTML = '元素已离开目标区域';
    this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    result.innerHTML = '落入目标区域的文字为:' + e.dataTransfer.getData('text');
    this.innerHTML = '元素已落在目标区域';
    this.style.backgroundColor = 'orange';    
}
</script>

  当然,也足以在dragstart事件管理程序中调用setData(),手动保存自身要传输的多少,以便未来应用

<div id="test" draggable="true" data-value="这是一个秘密" style="height:30px;width:100px;background:pink;">拖动源</div>    
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目标</div>
<div id="result"></div>
<script>
 //兼容IE8-浏览器
test.onmousedown = function(){
    if(this.dragDrop){
        this.dragDrop();
    }
}
test.ondragstart = function(e){
    e = e || event;
    e.dataTransfer.setData('text',test.getAttribute('data-value'));
}
target.ondragenter = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    this.innerHTML = '有元素进入目标区域';
    this.style.background = 'red';
}
target.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}
target.ondragleave = function(e){
    e = e || event;    
    this.innerHTML = '元素已离开目标区域';
    this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    result.innerHTML = '落入目标区域的文字为:' + e.dataTransfer.getData('text');
    this.innerHTML = '元素已落在目标区域';
    this.style.backgroundColor = 'orange';    
}
</script>

详尽参考那里: http://caniuse.com/\#search=drag

详细参考那里: http://caniuse.com/\#search=drag

拖放目标

  拖放指标是指被拖动的要素放手鼠标时被停放的靶子

  拖放源被拖动到拖放目的上时,将逐一触发dragenter、dragover和dragleave或drop那多少个事件

dragenter

  只要有成分被拖动到放置目的上,触发dragenter事件

dragover

  被拖动的因素在放置目的的限量内运动时,持续触发dragover事件

dragleave

  假如成分被拖出了放置目的,触发dragleave事件

drop

  假诺元素被置于了放置目的中,触发drop事件

  [注意]firefox浏览器的drop事件的暗许行为是开发被放置放置目标上的U翼虎L。为了让firefox扶助平日的拖放,还要收回drop事件的暗中同意行为

  暗许意况下,目的成分是差异意被停放的,所以不会发生drop事件。只要在dragover和dragenter事件中梗阻默许行为,本事产生被允许的放置目的,工夫允许发生drop事件。此时,光标形成了同意放置的暗号

4858美高梅 7

<div id="test"  draggable="true" style="height:30px;width:130px;background:pink;float:left;">拖放源</div>    
<div id="target" style="float:right;height: 200px;width:200px;background:lightblue;">拖放目标</div>
<script>
var timer,i=0;
var timer1,i1=0;
//兼容IE8-浏览器
test.onmousedown = function(){
    if(this.dragDrop){
        this.dragDrop();
    }
}
test.ondragstart = function(){
    this.style.backgroundColor = 'lightgreen';
    this.innerHTML = '开始拖动';
}
test.ondrag = function(){
    if(timer) return;
    timer = setInterval(function(){
        test.innerHTML =  '元素已被拖动' + ++i + '秒';
    },1000);
}
test.ondragend = function(){
    clearInterval(timer);
    timer = 0;i =0;
    this.innerHTML = '结束拖动';
    this.style.backgroundColor = 'pink';
}
target.ondragenter = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    this.innerHTML = '有元素进入目标区域';
    this.style.background = 'red';
}
target.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    if(timer1) return;
    timer1 = setInterval(function(){
        target.innerHTML =  '元素已进入' + (++i1) + '秒';
    },1000);
}
target.ondragleave = function(){
    clearInterval(timer1);
    timer1 = 0;i1=0;
    this.innerHTML = '元素已离开目标区域';
    this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(){
    clearInterval(timer1);
    timer1 = 0;i1=0;
    this.innerHTML = '元素已落在目标区域';
    this.style.backgroundColor = 'orange';    
}
</script>

4858美高梅 8

转移光标

  利用dataTransfer对象,不仅能够传输数据,还能够经过它来分明被拖动的要素以及作为放罝目标的成分能够接收什么操作。为此,需求拜访dataTransfer对象的四个脾性:dropEffect和effectAllowed

  实际上,那三个属性并从未怎么用,只是拖动力源在拖动目的上移步时,改换区别的光标而已(不过,有一种情景除了)

dropEffect

  dropEffect属性能够知道被拖动的因素能够奉行哪类放置行为。那个天性有下列5个恐怕的值

  ”none”:不能够把拖动的因素放在那里。那是除文本框之外全体因素的暗许值(此时,将比异常的小概触发drop事件)

  ”move”:应该把拖动的成分移动到放置目的

  ”copy”:应该把拖动的成分复制到放置目标

  ”link”:表示放置目标会张开拖动的因素(但拖动的要素必须是一个链接,有U冠道L)

  在把成分拖动到放置目的上时,以上每2个值都会变成光标呈现为不一致的号子

  [注意]无法不在ondragover事件处理程序中针对放置目的来安装dropEffect属性

effectAllowed

  dropEffect属性唯有搭配effectAllowed属性才有用。effectAllowed属性表示同意拖动成分的哪个种类dropEffect

  effectAllowed属性或然的值如下

  ”uninitialized”:未有给被拖动的因素设置任何放置行为

  ”none”:被拖动的要素无法有别的表现

  ”copy”:只允许值为”copy”的dropEffect

  ”link”只允许值为”link”的dropEffect

  ”move”:只允许值为”move”的dropEffect

  ”copyLink”:允许值为”copy”和”link”的dropEffect

  ”copyMove”:允许值为”copy”和”move”的dropEffect

  ”linkMove”:允许值为”link”和”move”的dropEffect

  ”all”:允许放4dropEffect

  [注意]必须在ondragstart事件管理程序中安装effectAllowed属性

<div id="test" draggable="true"  style="height:30px;width:100px;background:pink;display:inline-block;">拖放源</div>
<br>
<div id="target1" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(none)拖放目标</div>
<div id="target2" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(move)拖放目标</div>
<div id="target3" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(copy)拖放目标</div>
<div id="target4" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(link)拖放目标</div>
<div id="result"></div>
<script>
//兼容IE8-浏览器
test.onmousedown =function(){
    if(this.dragDrop){
        this.dragDrop();
    }
}
test.ondragstart = function(e){
    e = e || event;
    //兼容firefox浏览器
    e.dataTransfer.setData('text','');
      e.dataTransfer.effectAllowed = 'all';
}
target1.ondragenter = target2.ondragenter =target3.ondragenter =target4.ondragenter =function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }this.style.background = 'red';
}
target1.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    e.dataTransfer.dropEffect = 'none';
}
target2.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    e.dataTransfer.dropEffect = 'move';
}
target3.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    e.dataTransfer.dropEffect = 'copy';
}
target4.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    e.dataTransfer.dropEffect = 'link';
}
target1.ondragleave = target2.ondragleave =target3.ondragleave =target4.ondragleave =function(e){
    e = e || event;    this.style.backgroundColor = 'lightblue';
}
target1.ondrop = target2.ondrop =target3.ondrop =target4.ondrop =function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    this.style.backgroundColor = 'orange';    
}
</script>

 

 

dataTransfer对象

  为了在拖放操作时得以落成数据调换,引进了dataTransfer对象,它是事件目标的一特性情,用于从被拖动成分向放置目标传递字符串格式的数码

  dataTransfer对象有七个首要方式:getData()和setData()

  getData()能够拿走由setData()保存的值。setData()方法的第2个参数,也是getData()方法唯一的二个参数,是三个字符串,表示保留的数据类型,取值为”text”或”UHighlanderL”

  IE只定义了”text”和”UENVISIONL”三种有效的数据类型,而HTML伍则对此加以扩充,允许钦点种种MIME类型。思量到向后10分,HTML伍也支撑”text”和”UENVISIONL”,但那两体系型会被映射为”text/plain”和”text/uri-list”

  实际上,dataTransfer对象可以为每个MIME类型都保存二个值。换句话说,同时在那几个目的中保存壹段文本和贰个UHummerH二L不会有其它难题

  [注意]保留在dataTransfer对象中的数据只万幸drop事件管理程序中读取

  在拖动文本框中的文本时,浏览器会调用setData()方法,将拖动的公文以”text”格式保存在dataTransfer对象中。类似地,在拖放链接或图像时,会调用setData()方法并保存U宝马X5L。然后,在这个因素被拖放到放置目的时,就足以因此getData()读到这么些数据

4858美高梅 9

<div>请将从这行文字中挑选一些移动到拖放目标中</div>    
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目标</div>
<div id="result"></div>
<script>
target.ondragenter = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    this.innerHTML = '有元素进入目标区域';
    this.style.background = 'red';
}
target.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}
target.ondragleave = function(e){
    e = e || event;    
    this.innerHTML = '元素已离开目标区域';
    this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    result.innerHTML = '落入目标区域的文字为:' + e.dataTransfer.getData('text');
    this.innerHTML = '元素已落在目标区域';
    this.style.backgroundColor = 'orange';    
}
</script>

4858美高梅 10

  当然,也得以在dragstart事件管理程序中调用setData(),手动保存自个儿要传输的多寡,以便今后应用

4858美高梅 11

<div id="test" draggable="true" data-value="这是一个秘密" style="height:30px;width:100px;background:pink;">拖动源</div>    
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目标</div>
<div id="result"></div>
<script>
 //兼容IE8-浏览器
test.onmousedown = function(){
    if(this.dragDrop){
        this.dragDrop();
    }
}
test.ondragstart = function(e){
    e = e || event;
    e.dataTransfer.setData('text',test.getAttribute('data-value'));
}
target.ondragenter = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    this.innerHTML = '有元素进入目标区域';
    this.style.background = 'red';
}
target.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}
target.ondragleave = function(e){
    e = e || event;    
    this.innerHTML = '元素已离开目标区域';
    this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    result.innerHTML = '落入目标区域的文字为:' + e.dataTransfer.getData('text');
    this.innerHTML = '元素已落在目标区域';
    this.style.backgroundColor = 'orange';    
}
</script>

4858美高梅 12

本文实现HTML伍原生拖放的采用德姆o,用到了常用的章程和本性,包容当代浏览器,依旧先看功用:

正文落成HTML5原生拖放的行使德姆o,用到了常用的办法和质量,包容今世浏览器,照旧先看效率:

更动光标

  利用dataTransfer对象,不仅能够传输数据,还是可以够由此它来鲜明被拖动的因素以及作为放罝目的的要素能够吸收什么操作。为此,必要拜访dataTransfer对象的两性格子:dropEffect和effectAllowed

4858美高梅 ,  实际上,那八个属性并不曾什么用,只是拖动力源在拖动目标上活动时,更改区别的光标而已(但是,有一种状态除了)

dropEffect

  dropEffect属性能够领会被拖动的要素能够实践哪一类放置行为。那天个性有下列五个也许的值

  ”none”:无法把拖动的成分放在此处。那是除文本框之外全数因素的暗许值(此时,将不可能触发drop事件)

  ”move”:应该把拖动的成分移动到放置目的

  ”copy”:应该把拖动的成分复制到放置目标

  ”link”:表示放置目的会打开拖动的因素(但拖动的要素必须是1个链接,有U帕杰罗L)

  在把成分拖动到放置目标上时,以上每2个值都会招致光标显示为分歧的符号

  [注意]无法不在ondragover事件管理程序中针对放置目的来安装dropEffect属性

effectAllowed

  dropEffect属性唯有搭配effectAllowed属性才有用。effectAllowed属性表示同意拖动成分的哪一种dropEffect

  effectAllowed属性大概的值如下

  ”uninitialized”:没有给被拖动的成分设置任何放置行为

  ”none”:被拖动的成分不能够有别的表现

  ”copy”:只允许值为”copy”的dropEffect

  ”link”只允许值为”link”的dropEffect

  ”move”:只允许值为”move”的dropEffect

  ”copyLink”:允许值为”copy”和”link”的dropEffect

  ”copyMove”:允许值为”copy”和”move”的dropEffect

  ”linkMove”:允许值为”link”和”move”的dropEffect

  ”all”:允许大四dropEffect

  [注意]务必在ondragstart事件管理程序中设置effectAllowed属性

4858美高梅 13

<div id="test" draggable="true"  style="height:30px;width:100px;background:pink;display:inline-block;">拖放源</div>
<br>
<div id="target1" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(none)拖放目标</div>
<div id="target2" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(move)拖放目标</div>
<div id="target3" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(copy)拖放目标</div>
<div id="target4" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(link)拖放目标</div>
<div id="result"></div>
<script>
//兼容IE8-浏览器
test.onmousedown =function(){
    if(this.dragDrop){
        this.dragDrop();
    }
}
test.ondragstart = function(e){
    e = e || event;
    //兼容firefox浏览器
    e.dataTransfer.setData('text','');
      e.dataTransfer.effectAllowed = 'all';
}
target1.ondragenter = target2.ondragenter =target3.ondragenter =target4.ondragenter =function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }this.style.background = 'red';
}
target1.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    e.dataTransfer.dropEffect = 'none';
}
target2.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    e.dataTransfer.dropEffect = 'move';
}
target3.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    e.dataTransfer.dropEffect = 'copy';
}
target4.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    e.dataTransfer.dropEffect = 'link';
}
target1.ondragleave = target2.ondragleave =target3.ondragleave =target4.ondragleave =function(e){
    e = e || event;    this.style.backgroundColor = 'lightblue';
}
target1.ondrop = target2.ondrop =target3.ondrop =target4.ondrop =function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    this

 

 

 上面详细介绍——

 上边详细介绍——

原生拖放事件:

原生拖放事件:

应用于被拖动成分的风浪:

运用于被拖动成分的事件:

  • dragstart
  • dragstart

    按下鼠标并初叶活动鼠标,会在被拖放的要素上触发dragstart事件。

    按下鼠标并早先运动鼠标,会在被拖放的成分上触发dragstart事件。

    注意:要利用HTML5的原生拖放功效,使该因素可拖动,要求设置draggable属性。暗中同意意况下,图像、链接和被入选的文件是足以拖动的,因为它们的draggable属性已经自行被安装成true。

    注意:要选用HTML五的原生拖放功效,使该因素可拖动,须要安装draggable属性。暗中同意意况下,图像、链接和被入选的文本是能够拖动的,因为它们的draggable属性已经自行被安装成true。

    4858美高梅 14

    4858美高梅 15

  • drag
  • drag

    触发dragstart事件后,随即会触发drag事件,而且在要素被拖动时期会没完没了触发该事件。

    触发dragstart事件后,随即会触发drag事件,而且在要素被拖动时期会频频触发该事件。

  • dragend
  • dragend

    拖动甘休(松手鼠标)的时候,会触发dragend事件。

    拖动甘休(松开鼠标)的时候,会触发dragend事件。

 

 

选拔于放置目标的轩然大波:

行使于放置目的的轩然大波:

  • dragenter
  • dragenter

    只要有元素被拖动到放置目的上,就会触发dragenter事件。

    只要有成分被拖动到放置目的上,就会触发dragenter事件。

  • dragover
  • dragover

    触发dragenter事件后,随即会触发dragover事件,而且假使被拖动成分在放置目标的限量内活动时,就会频频触发。

    触发dragenter事件后,随即会触发dragover事件,而且假使被拖动成分在放置目标的限定内活动时,就会频频触发。

  • dragleave
  • dragleave

    成分被拖出了放置目的,dragover事件不再产生,但会触发dragleave事件。

    元素被拖出了放置目标,dragover事件不再发生,但会触发dragleave事件。

  • drop
  • drop

    成分被放到了放置目的中,则会触发drop事件,而不是dragleave事件。

    成分被放置了放置目标中,则会触发drop事件,而不是dragleave事件。

 

 

  注意:(1)被拖动成分和停放目的能够设置为同2个因素,在自个儿上也得以触发drop事件,就算看似没啥用
=。=

  注意:(1)被拖动成分和停放目标可以安装为同八个因素,在本身上也得以触发drop事件,尽管看似没啥用
=。=

     (2)被拖动成分进入放置目的范围和距离的参阅规范是鼠标的职务,而不是鼠标上面拖动着的图像的界线

     (2)被拖动成分进入放置目标范围和离开的参阅规范是鼠标的职位,而不是鼠标上边拖动着的图像的边界

         
       (3)拖动时显得在鼠标光标下方的图像,暗许是该因素的三个别本,在dragstart事件中对成功对成分的复制(也得以透过setDragImage()自定义鼠标下拖动的成分),由此要潜伏本来的因素,最棒在drag事件中管理,便是在复制后开展拍卖(参见文末的源代码)

         
       (3)拖动时映以后鼠标光标下方的图像,暗中同意是该因素的三个别本,在dragstart事件中对形成对元素的复制(也能够通过setDragImage()自定义鼠标下拖动的要素),由此要藏匿本来的成分,最幸亏drag事件中管理,正是在复制后开展拍卖(参见文末的源代码)

 

 

dataTransfer对象

dataTransfer对象

  dataTransfer对象是事件目的的八个属性,只幸亏拖放事件的事件管理程序中做客。而且,dataTransfer对象的片段方法和总体性也只幸而一定的拖放事件中张开安装。

  dataTransfer对象是事件目的的四本性能,只幸好拖放事件的事件管理程序中做客。而且,dataTransfer对象的一部分措施和质量也只可以在特定的拖放事件中开始展览安装。

  常用方法:

  常用方法:

  • setData(format,data)
  • setData(format,data)

    在dragstart事件中,针对被拖放成分调用setData()函数,设置要传送的多少;用于从被拖放成分向放置目的传递字符串格式的多寡。

    在dragstart事件中,针对被拖放成分调用setData()函数,设置要传递的数额;用于从被拖放成分向放置目标传递字符串格式的多寡。

    第三个参数是数据类型,个中IE只定义了”text”和”U汉兰达L”二种有效的数据类型;第二个参数是字符串,表示要传送的多寡。  

    第2个参数是数据类型,个中IE只定义了”text”和”U普拉多L”二种有效的数据类型;第3个参数是字符串,表示要传递的多寡。  

 

 

  • getData(format)
  • getData(format)

    在drop事件中,针对放置目的调用getData()函数,赚取传递过来的数额。

    在drop事件中,针对放置目的调用getData()函数,获得传递过来的数目。

    第叁个参数是setData(
)中装置的数据类型

    第三个参数是setData(
)中设置的数据类型

 

 

  • setDragImage(element,
    x, y)
  • setDragImage(element,
    x, y)

    钦命壹副图像,当拖动发生的时候,突显在光标的世间。接受二个参数:
要展现的HTML成分和光标在图像中的x,y坐标。当中HTML成分能够是一幅图像,也得以是其余因素。

    钦赐一副图像,当拖动产生的时候,展现在光标的花花世界。接受二个参数:
要展现的HTML成分和光标在图像中的x,y坐标。当中HTML成分能够是一幅图像,也足以是其他因素。

    该属性IE10、IE1壹、艾德ge浏览器不帮忙。

    该属性IE十、IE1一、Edge浏览器不辅助。

 

 

  • clearData(format)
  • clearData(format)

    清除以一定格式保存的多少。

    清除以特定格式保存的数量。

 

 

  常用属性:

  常用属性:

  • dropEffect
  • dropEffect

  在dragenter事件中管理程序中,针对放置目标设置dropEffect属性的值,决定被拖动的元素能够奉行哪个种类放置行为(同时被拖动成分拖到放置目的上时,会议及展览示差别的光标符号)

  在dragenter事件中管理程序中,针对放置目的设置dropEffect属性的值,决定被拖动的成分能够实行哪一种放置行为(同时被拖动成分拖到放置目的上时,会彰显不等同的光标符号)

    none:不可能把拖动的因素放在此处。那是除了文本框之外全体因素暗中同意的值。

    none:不能够把拖动的成分放在此处。那是除了文本框之外全部因素暗中同意的值。

    move:应该把拖动的要素移动到放置目的。

    move:应该把拖动的要素移动到放置目的。

    copy:应该把拖动的要素复制到放置目标。

    copy:应该把拖动的要素复制到放置目的。

    link:放置目的会展开拖动的成分(但拖动的因素必须是个链接,有URubiconL地址)。

    link:放置目的会打开拖动的要素(但拖动的成分必须是个链接,有USportageL地址)。

  

  

  • effectAllowed
  • effectAllowed

  在dragstart事件管理程序中,针对被拖放成分设置effectAllowed属性的值,表示同意拖动成分的哪类dropEffect,和地点的dropEffect属性搭配使用。

  在dragstart事件管理程序中,针对被拖放成分设置effectAllowed属性的值,表示同意拖动成分的哪一类dropEffect,和下边包车型客车dropEffect属性搭配使用。

    uninitialized:未有给被拖动成分设置任何放置行为。

    uninitialized:未有给被拖动成分设置任何放置行为。

    none:被拖动的要素不可能有其它表现。

    none:被拖动的要素不可能有其余表现。

    copy:只允许值为”copy”的dropEffect。

    copy:只允许值为”copy”的dropEffect。

    link:只允许值为”link”的dropEffect。

    link:只允许值为”link”的dropEffect。

    move:只允许值为”move”的dropEffect。

    move:只允许值为”move”的dropEffect。

    copyLink:允许值为”copy”和”link”的dropEffect。

    copyLink:允许值为”copy”和”link”的dropEffect。

    copyMove:允许值为”copy”和”move”的dropEffect。

    copyMove:允许值为”copy”和”move”的dropEffect。

    linkMove:允许值为”link”和”move”的dropEffect。

    linkMove:允许值为”link”和”move”的dropEffect。

    all:允许任意dropEffect。

    all:允许自便dropEffect。

 

 

   关于dataTransfer别的的片段方法和脾性,以及更详尽的牵线,请看那里  https://developer.mozilla.org/en-US/docs/Web/API/HTML\_Drag\_and\_Drop\_API

   关于dataTransfer其余的有个别形式和性质,以及更详细的介绍,请看那里  https://developer.mozilla.org/en-US/docs/Web/API/HTML\_Drag\_and\_Drop\_API

 

 

文末源码部分——

文末源码部分——

HTML代码:

HTML代码:

4858美高梅 164858美高梅 17

4858美高梅 184858美高梅 19

<div id='container'>
    <div id='wrap'>
        <img src="http://d3.freep.cn/3tb_160909012718ljdh572240.jpg" title='鞋子'/>
        <img src="http://d2.freep.cn/3tb_160909012718973d572240.jpg" title='包子'/>
        <img src="http://d2.freep.cn/3tb_1609090127197ux5572240.jpg" title='薯片'/>
    </div>
    <div id='cart'></div>
</div>  
<div id='container'>
    <div id='wrap'>
        <img src="http://d3.freep.cn/3tb_160909012718ljdh572240.jpg" title='鞋子'/>
        <img src="http://d2.freep.cn/3tb_160909012718973d572240.jpg" title='包子'/>
        <img src="http://d2.freep.cn/3tb_1609090127197ux5572240.jpg" title='薯片'/>
    </div>
    <div id='cart'></div>
</div>  

View Code 

View Code 

CSS代码:

CSS代码:

4858美高梅 204858美高梅 21

4858美高梅 224858美高梅 23

*{
    margin: 0;
    padding: 0;
}
body{
    -webkit-user-select: none; 
       -moz-user-select: none; 
       -ms-user-select: none; 
       user-select: none;
}
#wrap{
    height: 100px;
    text-align: center;
}
img{
    width: 100px;
    height: 100px;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}
#cart{
    width: 500px;
    height: 100px;
    border-radius: 20px;
    margin: 50px auto 0;
    background-color: orange;
}
#cart.hover{
    background-color: red;
}
#cart img{
    width: 70px;
    height: 70px;
    margin: 15px;
}
*{
    margin: 0;
    padding: 0;
}
body{
    -webkit-user-select: none; 
       -moz-user-select: none; 
       -ms-user-select: none; 
       user-select: none;
}
#wrap{
    height: 100px;
    text-align: center;
}
img{
    width: 100px;
    height: 100px;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}
#cart{
    width: 500px;
    height: 100px;
    border-radius: 20px;
    margin: 50px auto 0;
    background-color: orange;
}
#cart.hover{
    background-color: red;
}
#cart img{
    width: 70px;
    height: 70px;
    margin: 15px;
}

View Code

View Code

JS代码:

JS代码:

4858美高梅 244858美高梅 25

4858美高梅 264858美高梅 27

//被拖动元素的三个事件
function dragstart(e){
  e = EventUtil.getEvent(e);
  var target = EventUtil.getTarget(e);
  e.dataTransfer.setData("text",target.title);
  //因为IE10、IE11和Edge不支持setDragImage()方法,需要判断
  if(e.dataTransfer.setDragImage){
    e.dataTransfer.setDragImage(target,50,50); 
  }

  //effectAllowed事件和dropEffect事件搭配使用
  e.dataTransfer.effectAllowed = 'move';
  dragElement = target;
}
function drag(e){
  e = EventUtil.getEvent(e);
  var target = EventUtil.getTarget(e);
  setOpacity(target,0);
}
function dragend(e){
  e = EventUtil.getEvent(e);
  var target = EventUtil.getTarget(e);
  setOpacity(target,1);
}

//放置目标的四个事件
function dragenter(e){
  e = EventUtil.getEvent(e);
  var target = EventUtil.getTarget(e);
  //重要!重写dragenter事件的默认行为,使其可以触发drop事件
  EventUtil.preventDefault(e); 
  //dropEffect事件和effectAllowed事件搭配使用
  e.dataTransfer.dropEffect = 'move';
  target.className = 'hover';
}
function dragover(e){
  e = EventUtil.getEvent(e);
  //重要!重写dragover事件的默认行为,使其可以触发drop事件
  EventUtil.preventDefault(e); 
}
function dragleave(e){
  e = EventUtil.getEvent(e);
  var target = EventUtil.getTarget(e);
  target.className = '';
}
function drop(e){
  e = EventUtil.getEvent(e);
  var target = EventUtil.getTarget(e);
  var title = e.dataTransfer.getData("text");
  console.warn('把%s添加到购物车中!',title);
  target.className = '';
  dragElement.parentNode.removeChild(dragElement);
  var img = dragElement.cloneNode();
  img.draggable = false;
  setOpacity(img,1);
  cart.appendChild(img);

  //重要!为了让Firefox支持正常的拖放,取消drop事件的默认行为
  EventUtil.preventDefault(e); 
}


//设置透明度
function setOpacity(element,value){
  if(typeof element.style.opacity!='undefined'){
    element.style.opacity=value;
  }else{
    element.style.filter = "alpha(opacity="+value*100+")";        
  }
}
//事件处理,做兼容处理
var EventUtil={    
  //添加事件处理程序
  addHandler:function(element,type,handler){     
    if(element.addEventListener){          
      element.addEventListener(type,handler,false);    
    }else if(element.attachEvent){           
      element.attachEvent("on"+type,handler);      
    }else{         
      element["on"+type]=handler;           
    }   
  },      
  //获取事件对象
  getEvent:function(event){       
    return event?event:window.event;   
  },     
  //获取事件的目标
  getTarget:function(event){      
    return event.target||event.srcElement;   
  },    
  //取消默认事件
  preventDefault:function(event){       
    if(event.preventDefault){         
      event.preventDefault();       
    }else{         
      event.returnValue=false;      
    }   
  }
};

var imgs = document.getElementsByTagName("img"),
    cart = document.getElementById('cart'),
    dragElement = null;

for(var i=0; i<imgs.length; i++ ){
  EventUtil.addHandler(imgs[i],'dragstart',dragstart);
  EventUtil.addHandler(imgs[i],'drag',drag);
  EventUtil.addHandler(imgs[i],'dragend',dragend);
}
EventUtil.addHandler(cart,'dragenter',dragenter);
EventUtil.addHandler(cart,'dragover',dragover);
EventUtil.addHandler(cart,'dragleave',dragleave);
EventUtil.addHandler(cart,'drop',drop);
//被拖动元素的三个事件
function dragstart(e){
  e = EventUtil.getEvent(e);
  var target = EventUtil.getTarget(e);
  e.dataTransfer.setData("text",target.title);
  //因为IE10、IE11和Edge不支持setDragImage()方法,需要判断
  if(e.dataTransfer.setDragImage){
    e.dataTransfer.setDragImage(target,50,50); 
  }

  //effectAllowed事件和dropEffect事件搭配使用
  e.dataTransfer.effectAllowed = 'move';
  dragElement = target;
}
function drag(e){
  e = EventUtil.getEvent(e);
  var target = EventUtil.getTarget(e);
  setOpacity(target,0);
}
function dragend(e){
  e = EventUtil.getEvent(e);
  var target = EventUtil.getTarget(e);
  setOpacity(target,1);
}

//放置目标的四个事件
function dragenter(e){
  e = EventUtil.getEvent(e);
  var target = EventUtil.getTarget(e);
  //重要!重写dragenter事件的默认行为,使其可以触发drop事件
  EventUtil.preventDefault(e); 
  //dropEffect事件和effectAllowed事件搭配使用
  e.dataTransfer.dropEffect = 'move';
  target.className = 'hover';
}
function dragover(e){
  e = EventUtil.getEvent(e);
  //重要!重写dragover事件的默认行为,使其可以触发drop事件
  EventUtil.preventDefault(e); 
}
function dragleave(e){
  e = EventUtil.getEvent(e);
  var target = EventUtil.getTarget(e);
  target.className = '';
}
function drop(e){
  e = EventUtil.getEvent(e);
  var target = EventUtil.getTarget(e);
  var title = e.dataTransfer.getData("text");
  console.warn('把%s添加到购物车中!',title);
  target.className = '';
  dragElement.parentNode.removeChild(dragElement);
  var img = dragElement.cloneNode();
  img.draggable = false;
  setOpacity(img,1);
  cart.appendChild(img);

  //重要!为了让Firefox支持正常的拖放,取消drop事件的默认行为
  EventUtil.preventDefault(e); 
}


//设置透明度
function setOpacity(element,value){
  if(typeof element.style.opacity!='undefined'){
    element.style.opacity=value;
  }else{
    element.style.filter = "alpha(opacity="+value*100+")";        
  }
}
//事件处理,做兼容处理
var EventUtil={    
  //添加事件处理程序
  addHandler:function(element,type,handler){     
    if(element.addEventListener){          
      element.addEventListener(type,handler,false);    
    }else if(element.attachEvent){           
      element.attachEvent("on"+type,handler);      
    }else{         
      element["on"+type]=handler;           
    }   
  },      
  //获取事件对象
  getEvent:function(event){       
    return event?event:window.event;   
  },     
  //获取事件的目标
  getTarget:function(event){      
    return event.target||event.srcElement;   
  },    
  //取消默认事件
  preventDefault:function(event){       
    if(event.preventDefault){         
      event.preventDefault();       
    }else{         
      event.returnValue=false;      
    }   
  }
};

var imgs = document.getElementsByTagName("img"),
    cart = document.getElementById('cart'),
    dragElement = null;

for(var i=0; i<imgs.length; i++ ){
  EventUtil.addHandler(imgs[i],'dragstart',dragstart);
  EventUtil.addHandler(imgs[i],'drag',drag);
  EventUtil.addHandler(imgs[i],'dragend',dragend);
}
EventUtil.addHandler(cart,'dragenter',dragenter);
EventUtil.addHandler(cart,'dragover',dragover);
EventUtil.addHandler(cart,'dragleave',dragleave);
EventUtil.addHandler(cart,'drop',drop);

View Code

View Code

参考资料:
《JavaScript高等程序设计》,MDN

参考资料:
《JavaScript高档程序设计》,MDN

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有