Question

我试图翻转使用jquery拖动的图像当我将图像拖动到新的div时，它会成为一个类。我使用ui.helper.addClass("gemaakt");并且它工作正常！问题是，我的CSS脚本正在翻转图像等..但出于某种原因不是类？由于我拖动了这些图像，因此将它们放入一个类

中

很难解释，所以我决定将它发布在JSfiddle上，以便你可以看到它，

http://jsfiddle.net/qbvzwsg2/ http://jsfiddle.net/qbvzwsg2/2/＆lt; - 更新版本

如你所见，翻盖（在底部，正常工作）点击图片时，它完美无瑕，没问题。

但现在，将卡片拖入盒子，然后点击该图片.. 什么都没发生:(

<div class="flip-container">
    <div class="flipper" onclick="this.classList.toggle('flipped')">
        <div class="front">
            <div class="ui-draggable gemaakt dropped"> </div>
        </div>
        <div class="back">
            <img src="./img/test.jpg">
        </div>
    </div>
</div>

由于某种原因，它不能翻转一个类

帮助别人？：d

Answer 1

您忘记将翻转容器翻转类添加到html中的图像元素中。

DEMO

我没有时间把它漂亮：P

Answer 2

Persijn是对的。图像不会翻转。翻转的是整个容器，就像底部的卡片一样：

<div class="flip-container">
    <div class="flipper" onclick="this.classList.toggle('flipped')">
        <div class="front">
            <div class="ui-draggable gemaakt dropped"> </div>
        </div>
        <div class="back">
            <img src="./img/test.jpg">
        </div>
    </div>
</div>

因此，为了实现目标，您可以更改.cards img的HTML以完成该结构并将可拖动更改为.cards .flip-container。

为了更方便地向您显示fiddle，我刚刚添加了此脚本来准备正确的结构，而不是更改HTML：

$(".cards img").each(function() {
    $(this).wrap('<div class="front"></div>').parent().wrap('<div class="flipper"></div>').parent().wrap('<div class="flip-container"></div>').append('<div class="back">FLIPPED</div>');
});

然后，使用正确的结构，我将可拖动更改为.flip-container，如上所述：

$(".cards .flip-container").draggable({

通过添加stop回调，更改了onclick处理程序，以便在放置到正确的位置时使卡可以翻转：

stop: function (event, ui) {
    ui.helper.removeClass("draggable");
    var imgSrc = ui.helper.find("img")[0].src.split("/");
    var image = imgSrc[imgSrc.length - 1];
    if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
         ui.helper.find(".flipper").attr("onclick", "this.classList.toggle('flipped')");            
    } else {

    }
}

最后，添加样式不会破坏外观和感觉：

.flip-container, .front, .back {
    display: inline-block !important;
    height: 150px !important;
}
#dvDest img {
    margin: 0px !important;
}

CSS - 翻转图像

2 个答案: