JS 页面元素拖动遇到的几个问题,问题在备注里面

// JavaScript Document

//事件监听器,字数限制
function listener(eventTarget,eventTpye,handler){}

//取消事件,字数限制
function cancelEvent(event){}

//取消传递
function cancelPropagation(event){
if(event.stopPropagation){
event.stopPropagation()
}else{
event.cancelBubble=true
}
}
//启动拖拽
var item=document.getElementById("item");
item.setAttribute("draggable","true");
function dragStart(evt){
evt=evt||window.event;//为什么用evt而不直接写dragstart(event)
evt.dataTransfer.effectAllowed="copy"//evt.dataTransfer.effectAllowedd的值 “none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”分别是什么作用?

evt.dataTransfer.setData("Text",item.id)//evt.dataTransfer.setData(format,data)中,data是不是指数据的内容,比如evt.dataTransfer.setData("Text",item.id)这句话就是把item元素的id复制到粘贴板上以进行下一步调用?

//放下
function Drop(evt){
evt=evt||window.event;
evt.dataTransfer.dropEffect="copy";
var id =evt.dataTransfer.getData("Text");//getData()方法是将粘贴板上的一类数据获得,此句作用应该是将item的ID赋值给id变量一遍调用
target.appendChild(document.getElemntById(id));//这里target是否是默认的event.target
}
//取消拖动反馈
function dragOver(evt){
if(evt.preventDefault)evt.preventDefault
evt=evt||window.event;
evt.dataTransfer.dropEffect="copy";//书上说拖动需要取消被放置元素的dragover事件,那么直接if语句和return false不就好了,为什么要多这一行。
//evt.dataTransfer.dropEffect=”copy“是什么作用是当元素拖动并放下时,将粘贴板里的内容复制到被拖动的元素吗?如果是,假如粘贴板内容很多,又是怎么对粘贴内容进行选择的呢。
return false;
}
//监听安置
window.onload=function(){
var target=document.getElementById("drop");
listener(target,"dragenter",cancelEvent);
listener(target,"dragover",dragOver);
listener(target,"drop",Drop);

listener(item,"dragstart",dragStart)
}
}
//脚本目的是为了将一个id为”item“的div放入另一个id为”drop“的div里。

http://www.w3cmm.com/html/drag.html

上面这个是html5的拖拽api的说明

里面有你想要的解释


然后你里面的一些小问题,我给你说明一下

function dragStart(evt){
evt=evt||window.event;//为什么用evt而不直接写dragstart(event)

evt.dataTransfer.effectAllowed="copy";
//evt.dataTransfer.effectAllowedd的值
        //“none”、“copy”、“copyLink”、“copyMove”、“link”、
//“linkMove”、“move”、“all”分别是什么作用?

evt.dataTransfer.setData("Text",item.id);
//evt.dataTransfer.setData(format,data)
        //中,data是不是指数据的内容,比如evt.dataTransfer.setData("Text",item.id)这句话就是把item元素的
        //id复制到粘贴板上以进行下一步调用?

evt=evt||window.event;//为什么用evt而不直接写dragstart(event)

这个问题是,在除ie以外的浏览器中,evt对象(event的缩写)是直接通过参数传递的变量

在ie中,浏览器并没有把event传递给你,而是把它绑定到window.event这个属性上了

所以在这里处理的时候,需要做一个判断,如果存在evt就直接使用evt,否则用window.event


evt.dataTransfer.effectAllowed="copy";

这个属性在上面的链接里面有解释


evt.dataTransfer.setData("Text",item.id);

这个方法的setData参数的第一个,只支持俩个属性Text , Url,

也就是只能保存这俩种数据类型

在上面的链接里面也有详细的解释


evt.dataTransfer

为了在拖放操作时实现数据交换,这个属性就是用来保存一个临时的数据用的

你可以在拖放动作中,吧数据保存在这个属性中,用setData,然后在处理函数中用getData

拿到保存的数据来做处理


整个流程是这样的

<div id="item"></div>

<div id="drop"></div>

就是把item拖拽到drop上的时候,把item放到drop里面


首先,给item绑定一个drapstart的拖拽开始事件,需要把item的draggable属性设置为true

标识这个元素是可以拖拽的

在这个拖拽的动作中(drapstart),把item的id保存到evt.dataTransfer属性里面

并且设置这个元素可以执行的放置行为(effectAllowed),copy,也就是复制


然后给drop绑定鼠标的释放事件(drop)

在这里取到保存在evt.dataTransfer里面的item的id

然后drop.appendChild(document.getElemntById(id));

把这个元素放置到drop元素里面


整体流程就是这样的

你那里的target属性就是drop这个元素了,只不过你的那个貌似是onload方法里面的一个局部变量,外面似乎访问不到,你可以把它的var声明放在外面就可以了

温馨提示:答案为网友推荐,仅供参考
第1个回答  2014-02-20
这么多字,drag,drag,drag

onmousedown

onmousemove

onmouseup

结束拖动...

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网