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

JavaScript022

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

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

因为需要计算元素的位置变化，所以需要掌握几个关于位置的api

点击需要拖动元素时，获取该元素的初始位置。

鼠标移动期间 获取元素当前的位置信息

计算

进行事件监听

拖拽的实现原理：通过事件mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除），拖拽的过程就是mousemove阶段；

问题产生的原因：因为mousemove 的间隔性触发，当两次mousemove事件触发的间隔中，鼠标移动距离出了element的范围，就会产生鼠标脱离element范围，拖拽就停止，

解决方法： 将mousemove事件挂在docment，而不是对应的element，此时鼠标滑动只要不出docment范围就不会触发上述情况。

拖动事件完成的动作时是：mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除） 但是mouseup的时候 同时会触发 点击事件（如果元素上面有点击事件的话）

处理办法：记录mousedown(记录开始时间) →mousemove→mouseup（记录结束时间） 的时间 根据时间长短判断是进行了点击事件还是进行了拖拽事件。

正常需求的话 就希望拖拽元素只在屏幕的可视范围内进行拖拽，不能跑出去。

在onmousemove 中添加边缘控制就好，具体范围可以根据具体需求更改。

<script type="text/javascript"><!--

$(document).ready(function()

{

$(".show").mousedown(function(e)//e鼠标事件

{

$(this).css("cursor","move")//改变鼠标指针的形状

var offset = $(this).offset()//DIV在页面的位置

var x = e.pageX - offset.left//获得鼠标指针离DIV元素左边界的距离

var y = e.pageY - offset.top//获得鼠标指针离DIV元素上边界的距离

$(document).bind("mousemove",function(ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件

{

$(".show").stop()//加上这个之后

var _x = ev.pageX - x//获得X轴方向移动的值

var _y = ev.pageY - y//获得Y轴方向移动的值

$(".show").animate({left:_x+"px",top:_y+"px"},10)

})

})

$(document).mouseup(function()

{

$(".show").css("cursor","default")

$(this).unbind("mousemove")

})

})

// --></script>