2

如果我将一个对象拖到另一个元素上，它第一次不起作用，但第二次起作用。

原因似乎是我的辅助元素是一个图像，它没有设置宽度和高度。

这是代码：
HTML

    <div class="target"></div>
    <div class="element"></div>


CSS

    .target {
        width: 63px;
        height: 63px;
        background: rgb(185, 185, 185);
        position: relative;
    }

    .helper {
        background: pink;
    }

    .box {
        width: 63px;
        height: 63px;
        background: orange;    
    }

    .element {
        width: 63px;
        height: 63px;
        background: navy;
        position: absolute;
        left: 200px;
        top: 10px;
    }


JavaScript

$(".element").draggable({
    cursor: 'move',
    helper: function () {
        return $('<img src="http://cdn1.iconfinder.com/data/icons/tsgk-cctld-territories-icons-flags-pack-v---borderless/16/saint_helier.png" class="helper"></img>');
    },
    snap: ".target"
});

$('.target').droppable( {
    accept: ".element",
    hoverClass: 'hovered',
    drop: function(event, ui){
        var tile = $('<div class="box"><span>Tile</span></div>');
        $(".target").append(tile);
    }
});

如果我向.helper类添加高度和宽度，它会按预期工作。

这是代码的链接：http: //jsfiddle.net/ZzetJ/1/

我想了解为什么它第二次起作用，为什么需要设置高度和宽度？

编辑：

从下面的评论中，我看到人们无法重现这些问题。

对我来说，它不适用于 Chrome 和 Firefox，但适用于 IE9。确保在运行之前有一个清晰的缓存。

铬版：27.0.1453.110 m

复制步骤：

  1. 使用 Chrome 并按 CTRL+SHIFT+N 进入隐身模式。
  2. 转到 jsfiddle.net/ZzetJ/1/

  3. 将蓝色 div 拖到灰色 div 的顶部。

    结果：您应该在拖动时看到一个图像，并且当拖放发生时，灰色 div 应该变为橙色。在这种情况下，它会失败。

  4. 再次将蓝色 div 拖到灰色 div 的顶部。

    结果：灰色 div 成功变为橙色。

  5. 在同一浏览器中打开一个新选项卡。

  6. 转到 jsfiddle.net/ZzetJ/1/

  7. 将蓝色 div 拖到灰色 div 的顶部。

    结果：灰色 div 变为橙色。

所以一定要清除缓存。

4

0 回答 0