找回密码
 立即注册

QQ登录

只需一步,快速开始

dropEffect与effectAllowed

dataTransfer对象,还可以确定被拖动的元素以及作为放置目的的元素可以或许吸收什么操纵。以是必要访问dataTransfer对象的两个属性:dropEffect和effectAllowed

dropEffect可以知道被拖动的元素可以或许实行哪种放置举动,4个大概的值

  • none:不能把拖动的元素放在这里。这是除文本框以外全部元素默认值
  • move:一个项目被移动到一个新的位置。
  • copy:应该把拖动元素复制到放置目的
  • link:放置目的会打开拖动元素(拖动元素必须是一个链接)
要利用dropEffect,必须在ondragenter变乱处置惩罚步伐中
dropEffect属性只有搭配effectAllowed属性才有效。effectAllowed属性表现答应拖动元素的哪种dropEffect,大概值如下

  • 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
    代码如下
var div1=document.getElementById("div1");//文本框
var drag1=document.getElementById("drag1");//图片
div1.addEventListener("dragover",function(e){
e.preventDefault()
},false)
drag1.addEventListener("dragstart",function(e){
e.dataTransfer.effectAllowed="none";
e.dataTransfer.setData("text",e.target.id);
},false)
div1.addEventListener("drop",function(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
},false)
drag1.addEventListener("dragenter",function(e){
e.preventDefault()
e.dataTransfer.dropEffect="copy";
},false)
分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 立即注册