用 JavaScript 实现拖动遇到一个事件相关的问题

[isbase]

如图左右两边容器 ID 为 left 和 right

1.当按下鼠标左键开始拖动 right 容器里的 2 号标签到 left 容器,光标进入 left 容器后释放鼠标左键,这时候 drop 事件的响应函数里 e.target 值为 2 号标签.

2.反之,拖动一号标签到 right 容器,当光标进入 right 容器后释放鼠标左键,这时候 drop 事件的响应函数里的 e.target 值为 right 容器

问题来了,当触发 drop 事件时光标是在那两个拖动的标签上,所以我的理解是 e.target 应该是那两个拖动的标签,为什么会出现 e.target 值为 right 容器这种情况呢

附上 CodePend 地址
http://codepen.io/isbase/pen/MeWqww

在 codepen 实例和 GIF 中还可以看到在拖动标签时 console 里 allowdrop=true 的时候,我将正在拖动标签的 cursor 指定为 copy,但是只有我说的第一种情况达到了目的,第二张情况虽然 console 里显示拖动标签的 cursor 值为 copy,但是实际上光标已经变成默认的箭头了.

[jerray]

LZ 这里用的是 mouseup 事件，建议看下文档：

https://developer.mozilla.org/en-US/docs/Web/Events/mouseup

mouseup 事件的 target 是当前 DOM 最顶部的元素。试着给你拖拽的元素加了个 z-index ，每次释放的时候 target 就是拖拽的元素了。

[isbase]

@jerray

Thanks

问题解决了,我再去仔细研究一下原理

[rekulas]

演示动态图什么工具生成的？

[isbase]

@rekulas LICEcap

[rekulas]

@isbase thanx 很不错的小工具