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

Posted 2023-03-09

// 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声明放在外面就可以了

参考技术A 这么多字，drag，drag，drag

onmousedown

onmousemove

onmouseup

结束拖动...