V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
isbase
V2EX  ›  JavaScript

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

  •  
  •   isbase · 2016-05-30 16:55:24 +08:00 · 1825 次点击
    这是一个创建于 3103 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如图左右两边容器 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,但是实际上光标已经变成默认的箭头了.
    5 条回复    2016-05-31 15:52:16 +08:00
    jerray
        1
    jerray  
       2016-05-30 17:28:31 +08:00
    LZ 这里用的是 mouseup 事件,建议看下文档:

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

    mouseup 事件的 target 是当前 DOM 最顶部的元素。试着给你拖拽的元素加了个 z-index ,每次释放的时候 target 就是拖拽的元素了。
    isbase
        2
    isbase  
    OP
       2016-05-30 20:24:14 +08:00
    @jerray

    Thanks

    问题解决了,我再去仔细研究一下原理
    rekulas
        3
    rekulas  
       2016-05-31 09:54:32 +08:00
    演示动态图什么工具生成的?
    isbase
        4
    isbase  
    OP
       2016-05-31 15:33:52 +08:00
    @rekulas LICEcap
    rekulas
        5
    rekulas  
       2016-05-31 15:52:16 +08:00
    @isbase thanx 很不错的小工具
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3795 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:32 · PVG 18:32 · LAX 02:32 · JFK 05:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.