Question

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

原因似乎是我的辅助元素是一个图像，它没有宽度＆amp;高度设定为它。

这是代码：
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。确保在运行之前有一个清除缓存。

Chrome版本：27.0.1453.110 m

Repro步骤：

使用Chrome并按CTRL + SHIFT + N
转到jsfiddle.net/ZzetJ/1 /
拖动灰色div顶部的蓝色div。

结果：您应该在拖动时看到图像，当发生拖放时，灰色div应该更改为橙色。在这种情况下，它失败了。
再次在灰色div上拖动蓝色div。

结果：灰色div成功更改为橙色。
在同一浏览器中打开一个新标签页。
转到jsfiddle.net/ZzetJ/1 /
拖动灰色div顶部的蓝色div。

结果：灰色div变为橙色。

因此请务必清除缓存。

如果未设置辅助尺寸，则第一次拖放不起作用

0 个答案: