JavaScript-拖动图像-最多3个

JavaScript - Drag Image - max. 3

本文关键字：最多 3个 图像 拖动 JavaScript-      更新时间：2023-09-26

我正在尝试制作一个javascript脚本，使其可以将3个图像拖动到另一个div中。一旦用户在框上拖动了3个图像，它就无法将另一个图像拖到框中，

Js出价：
http://jsfiddle.net/qvmwgf5p/1/

正如您所看到的，它允许用户将所有图像拖动到div，我想将其锁定在3上。

感谢转发；'）

$(function () {
    $(".cards img").draggable({
        revert: "invalid",
        refreshPositions: true,
        drag: function (event, ui) {
            ui.helper.addClass("draggable");
        },
        stop: function (event, ui) {
            ui.helper.removeClass("draggable");
            var image = this.src.split("/")[this.src.split("/").length - 1];
            if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
            }
            else {
                alert(" Sleep de kaart naar de box, Dat is er naast.. drunk.");
            }
        }
    });
    $("#dvDest").droppable({
        drop: function (event, ui) {
            if ($("#dvDest img").length == 3) {
                    alert(" DEBUG: Selected 3 cards -> Now we have to flip them");
           //     $("#dvDest").html("");  dit zorgt ervoor dat me kaarten verdwijnen, appart:p
            }
              if ($("#dvDest img").length == 4) {
                    alert(" DEBUG: Wow dude, relax... The limit is 3 cards. 4 is not possible, fix this");
           //     $("#dvDest").html("");  dit zorgt ervoor dat me kaarten verdwijnen, appart:p
            }
            ui.draggable.addClass("dropped");
            $("#dvDest").append(ui.draggable);
        }
    });

});

解决了我的问题：对于和我有同样问题的人，这里是解决方案：

 drag: function (event, ui) {
            ui.helper.addClass("draggable");
             if ($("#dvDest img").length == 3) {return false;}

此：if ($("#dvDest img").length == 3) {return false;}

相关文章：