Javascript CSS-翻转图像

我正在尝试翻转使用jquery拖动的图像 当我将图像拖动到新的div时，它会生成一个类。我使用

ui.helper.addClass（“gemaakt”）而且工作正常！
问题是，我的CSS脚本正在翻转图像等等。。但为什么不上课呢？由于我拖动了这些图像，它将它们放入一个类中

很难解释，所以我决定把它发布在JSFIDLE上，这样你就可以看到它了


您忘记将flip容器flip类添加到
html
中的images元素中


我没来得及把它弄漂亮：p
波斯恩是对的。图像不会翻转。翻转的是整个容器，如底部的卡片：

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

然后，使用正确的结构，我将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;
}

谢谢但我正在寻找一种卡片一旦被拖进盒子里就可以翻转的东西，而不是在之前；）但是我不想让未选中的卡片（在盒子外面）被翻转？；）@我已经相应地更新了我的答案和提琴。先生，你帮了我很大的忙！
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;
}