码迷,mamicode.com
首页 > 其他好文 > 详细

拖放相关事件

时间:2017-01-04 23:29:39      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:事件对象   event   target   als   drop   cti   val   目标   方法   

一、拖放事件

1.任何元素都有一个draggable属性,draggable=true就能拖动,拖动元素时依次触发下列事件:

   (1)dragstart:按下鼠标并移动时,在被拖动元素上触发;

   (2)drag:在元素被拖动时持续触发;

   (3)dragend:拖动停止时触发;

2.当元素被拖动到一个有效的放置目标时,依次触发下列事件:

   (1)dragenter:元素被拖动到放置目标上触发;

   (2)dragover:被拖动元素在放置目标范围内移动时触发;

   (3)drop:元素被放到放置目标中触发;

二、自定义放置目标

当把元素拖动到无效的放置目标时,不会触发drop事件。我们可以把任何元素变成有效的放置目标:

div.ondragenter=function(event){
    if (event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue=false;
    }
}

div.ondragover=function(event){
    if (event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue=false;
    }
}


//取消元素默认放置行为
div.ondrop=function(event){
    if (event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue=false;
    }
}

三、dataTransfer对象

dataTransfer对象是事件对象的属性,有两个主要方法:setData()、getData(),用法如下:

event.dataTransfer.setData("Text",event.target.id);
var data=event.dataTransfer.getData("Text");

 

拖放相关事件

标签:事件对象   event   target   als   drop   cti   val   目标   方法   

原文地址:http://www.cnblogs.com/lodadssd/p/6250497.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!