CSS - 翻转图像

Question

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

很难解释，所以我决定 post 在 JSfiddle 上，这样你就可以看到它，

http://jsfiddle.net/qbvzwsg2/ http://jsfiddle.net/qbvzwsg2/2/ <- 更新版本

如您所见，翻盖（在底部，工作正常）点击图片时，翻转无误，没问题。

但是现在，将一张卡片拖到框中，然后单击该图像.. 什么都没发生:(

<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>

由于某种原因它不能翻转 class

帮助别人？ :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>');
});

然后，根据正确的结构，我将 draggable 更改为 .flip-container，正如我上面提到的：

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

并通过添加 onclick 回调更改其 stop 处理程序，使卡片在放置在正确位置时可翻转：

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 - 翻转图像

CSS - Flip image

html

javascript

jquery

dom

drag-and-drop