【澳门葡京】深深理解javascript原生拖放,HTML5原生拖放实例分析

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

HTML5提供了原生拖放作用的JavaScript
API,使用起来很方便。

前方的话

目前的话

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

 

兼容性:

兼容性:

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

拖放源

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

  HTML5为持有HTML成分规定了3个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属性,必须增添一个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>

 澳门葡京 1

 澳门葡京 2

 

拖放目的

  拖放目标是指被拖动的要素放开鼠标时被停放的目的

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

dragenter

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

dragover

  被拖动的成分在停放目的的限定内移动时,持续触发dragover事件

dragleave

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

drop

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

  [注意]firefox浏览器的drop事件的私下认可行为是开发被平放放置目标上的U悍马H二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浏览器有个别天性不接济,如IE十和IE1一、Edge对于dataTransfer.setData(format,data)
,只定义了”text”和”UENCOREL”二种有效的数据类型。而HTML五号正楷字式允许援助各个MIME类型。

对此PC端浏览器,Firefox、Chrome、Safari扶助美好,而IE和艾德ge浏览器有个别天性不帮忙,如IE拾和IE1一、艾德ge对于dataTransfer.setData(format,data)
,只定义了”text”和”U奥迪Q叁L”二种有效的数据类型。而HTML伍专门的学业允许扶助种种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()方法来贯彻拖动作效果果

澳门葡京 3

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

澳门葡京 4

  [注意]要是让firefox扶助draggable属性,必须加多二个ondragstart事件管理程序,并在dataTransfer对象使用setData()方法来运维功效

拖放事件

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

dragstart

  按下鼠标键并初步活动鼠标时,会在被拖放的成分上触发dragstart事件。此时光标产生“不能够放”符号(圆环中有一条反斜线),表示不可能把成分放到自个儿上边

drag

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

dragend

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

澳门葡京 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>

澳门葡京 6

【澳门葡京】深深理解javascript原生拖放,HTML5原生拖放实例分析。dataTransfer对象

  为了在拖放操作时得以完结数据交流,引进了dataTransfer对象,它是事件目的的6天性能,用于从被拖动成分向放置目的传递字符串格式的数量

  dataTransfer对象有三个关键情势:getData()和setData()

  getData()能够取得由setData()保存的值。setData()方法的第1个参数,也是getData()方法唯1的叁个参数,是一个字符串,表示保留的数据类型,取值为”text”或”URubiconL”

  IE只定义了”text”和”U索罗德L”三种有效的数据类型,而HTML五则对此加以扩展,允许内定种种MIME类型。考虑到向后相当,HTML伍也帮助”text”和”U帕杰罗L”,但那二种档期的顺序会被映射为”text/plain”和”text/uri-list”

  实际上,dataTransfer对象足以为每一种MIME类型都保留八个值。换句话说,同时在那几个目的中保留壹段文本和3个URAV4L不会有此外难点

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

  在拖动文本框中的文本时,浏览器会调用setData()方法,将拖动的文本以”text”格式保存在dataTransfer对象中。类似地,在拖放链接或图像时,会调用setData()方法并保存UPRADOL。然后,在这个元素被拖放到放置目的时,就能够透过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事件。此时,光标产生了同意放置的标识

澳门葡京 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>

澳门葡京 8

更换光标

  利用dataTransfer对象,不仅能够传输数据,还是可以够透过它来规定被拖动的因素以及作为放罝目标的要素能够吸收什么操作。为此,必要拜访dataTransfer对象的四个特性:dropEffect和effectAllowed

  实际上,那八个天性并从未什么样用,只是拖动力源在拖动目的上移步时,退换不一样的光标而已(可是,有一种状态除了)

dropEffect

  dropEffect属性能够知晓被拖动的因素能够实行哪类放置行为。那天性子有下列陆个也许的值

  ”none”:不能够把拖动的因素放在此处。那是除文本框之外全体因素的暗中认可值(此时,将不只怕触发drop事件)

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

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

  ”link”:表示放置指标会张开拖动的因素(但拖动的因素必须是三个链接,有UENCOREL)

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

  [注意]无法不在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()方法的第二个参数,也是getData()方法唯一的二个参数,是三个字符串,表示保留的数据类型,取值为”text”或”UHavalL”

  IE只定义了”text”和”U大切诺基L”三种有效的数据类型,而HTML伍则对此加以扩张,允许钦定各样MIME类型。思量到向后极度,HTML5也帮衬”text”和”U凯雷德L”,但那三种等级次序会被映射为”text/plain”和”text/uri-list”

  实际上,dataTransfer对象可认为每一个MIME类型都封存一个值。换句话说,同时在那些目标中保存一段文本和1个U瑞鹰L不会有其余难点

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

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

澳门葡京 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>

澳门葡京 10

  当然,也能够在dragstart事件管理程序中调用setData(),手动保存本人要传输的数额,以便以往选择

澳门葡京 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>

澳门葡京 12

本文完结HTML伍原生拖放的运用德姆o,用到了常用的章程和品质,包容当代浏览器,依然先看功能:

本文完结HTML伍原生拖放的接纳德姆o,用到了常用的方法和总体性,兼容当代浏览器,照旧先看成效:

变动光标

  利用dataTransfer对象,不仅能够传输数据,仍是能够因此它来分明被拖动的因素以及作为放罝目的的因素能够吸收接Nash么操作。为此,须求拜访dataTransfer对象的二日性格:dropEffect和effectAllowed

  实际上,那四个脾气并未怎么用,只是拖动力源在拖动目标上移步时,改变区别的光标而已(然而,有一种景况除了)

dropEffect

  dropEffect属性可以知晓被拖动的因素能够实践哪一类放置行为。那性情格有下列四个或许的值

  ”none”:不能够把拖动的因素放在这里。这是除文本框之外全体因素的暗中认可值(此时,将不可能触发drop事件)

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

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

  ”link”:表示放置目的会展开拖动的成分(但拖动的成分必须是一个链接,有U卡宴L)

  在把成分拖动到放置指标上时,以上每二个值都会促成光标显示为差别的号子

  [注意]无法不在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属性

澳门葡京 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事件。

    注意:要选拔HTML伍的原生拖放效用,使该因素可拖动,供给安装draggable属性。暗中同意情形下,图像、链接和被选中的文书是足以拖动的,因为它们的draggable属性已经自行被安装成true。

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

    澳门葡京 14

    澳门葡京 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)被拖动成分和停放目标可以安装为同3个成分,在自己上也能够触发drop事件,就算接近没啥用
=。=

  注意:(1)被拖动成分和停放目的能够安装为同3个因素,在自己上也能够触发drop事件,即便接近没啥用
=。=

     (2)被拖动元素进入放置目的限制和距离的参考标准是鼠标的地方,而不是鼠标上边拖动着的图像的界限

     (2)被拖动元素进入放置目的范围和距离的参考标准是鼠标的岗位,而不是鼠标下边拖动着的图像的界线

         
       (3)拖动时浮今后鼠标光标下方的图像,默许是该因素的二个别本,在dragstart事件中对成就对成分的复制(也足以由此setDragImage()自定义鼠标下拖动的成分),因而要藏匿本来的因素,最佳在drag事件中管理,正是在复制后开展拍卖(参见文末的源代码)

         
       (3)拖动时呈现在鼠标光标下方的图像,私下认可是该因素的1个别本,在dragstart事件中对成就对成分的复制(也足以由此setDragImage()自定义鼠标下拖动的因素),由此要藏匿本来的要素,最佳在drag事件中处理,正是在复制后张开始拍片卖(参见文末的源代码)

 

 

dataTransfer对象

dataTransfer对象

  dataTransfer对象是事件目标的一特性质,只可以在拖放事件的事件管理程序中访问。而且,dataTransfer对象的一对艺术和品质也只万幸一定的拖放事件中展开设置。

  dataTransfer对象是事件目标的二天性质,只幸而拖放事件的事件管理程序中做客。而且,dataTransfer对象的一对方法和特性也只可以在一定的拖放事件中开始展览安装。

  常用方法:

  常用方法:

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

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

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

    第三个参数是数据类型,在那之中IE只定义了”text”和”UCRUISERL”二种有效的数据类型;第3个参数是字符串,表示要传送的多少。  

    第一个参数是数据类型,个中IE只定义了”text”和”U昂CoraL”三种有效的数据类型;第3个参数是字符串,表示要传送的多少。  

 

 

  • getData(format)
  • getData(format)

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

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

    第陆个参数是setData(
)中安装的数据类型

    第一个参数是setData(
)中安装的数据类型

 

 

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

    钦赐壹副图像,当拖动爆发的时候,显示在光标的江湖。接受二个参数:
要呈现的HTML成分和光标在图像中的x,y坐标。当中HTML成分可以是1幅图像,也能够是其余因素。

    钦定一副图像,当拖动产生的时候,展现在光标的下方。接受一个参数:
要呈现的HTML成分和光标在图像中的x,y坐标。在那之中HTML成分可以是1幅图像,也得以是别的因素。

    该属性IE10、IE11、艾德ge浏览器不援助。

    该属性IE10、IE1一、Edge浏览器不帮助。

 

 

  • clearData(format)
  • clearData(format)

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

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

 

 

  常用属性:

  常用属性:

  • dropEffect
  • dropEffect

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

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

    none:无法把拖动的成分放在此处。那是除了文本框之外全数因素默许的值。

    none:不能够把拖动的要素放在此处。那是除了文本框之外全数因素暗许的值。

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

澳门葡京,    move:应该把拖动的因素移动到放置目的。

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

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

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

    link:放置目标会展开拖动的因素(但拖动的要素必须是个链接,有U奥迪Q五L地址)。

  

  

  • 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代码:

澳门葡京 16澳门葡京 17

澳门葡京 18澳门葡京 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代码:

澳门葡京 20澳门葡京 21

澳门葡京 22澳门葡京 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代码:

澳门葡京 24澳门葡京 25

澳门葡京 26澳门葡京 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

相关文章

发表评论

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

*
*
Website