Question

我正在开发一个小工具，它到目前为止工作，但我干扰了droppable（选项＆＃39;容忍＆＃39;设置为＆＃39;适合＆＃39;）的事实并不关心可放置的边框。

见这里：http://jsfiddle.net/scraddy/8geEB/20/

从小提琴中提取的相关javascript：

$("#dropzone").droppable({
    hoverClass: "ui-drop-hover",
    tolerance: "fit",
    drop: function(event, ui) {
        $("#dropzone p").hide();
        $("#pix img").draggable("disable").hover(function() {
            $(this).css({
                cursor: "default"
            });
        });
    }
});

$("#pix img").draggable({
    cursor: "move",
    revert: "invalid",
    helper: "clone",
    stop: function(event, ui) {
        if ($("#dropzone p").is(":hidden")) {
            $(ui.helper).clone().appendTo($("#dropzone")).resizable({
                handles: 'se',
                maxHeight: 200,
                minHeight: 25,
                aspectRatio: true,
                ghost: true,
                autoHide: true,
                stop: function(event, ui) {
                    var ximg = ui.position.left + ui.size.width;
                    var xdrop = $("#dropzone").offset().left + $("#dropzone").width();
                    var yimg = ui.position.top + ui.size.height;
                    var ydrop = $("#dropzone").offset().top + $("#dropzone").height();
                    if (ximg > xdrop || yimg > ydrop) {
                        $(this).position({
                            my: "right bottom",
                            at: "right bottom",
                            of: "#dropzone",
                            offset: ((xdrop - ximg) < 0 ? 0 : -(xdrop - ximg)) + " " + ((ydrop - yimg) < 0 ? 0 : -(ydrop - yimg))
                        });
                    }
                }
            }).parent().draggable({
                disabled: false,
                helper: "original",
                containment: "#dropzone",
                create: function(event, ui) {
                    if ($("#testing").size() === 0) {
                        $("#dropzone div.ui-wrapper").append('<img id="testing" src="http://palmenhandel-witten.de/img/close.png" width="16" height="16" alt="Bild entfernen" />');
                        $("img#testing").click(function() {
                            $("#dropzone p").fadeIn(350);
                            $("#dropzone div.ui-wrapper").resizable('destroy').draggable('destroy');
                            $(".ui-draggable-dragging").fadeOut(350, function() {
                                $(this).remove()
                            });
                            $("#pix img").draggable("enable").hover(function() {
                                $(this).css({
                                    cursor: "move"
                                });
                            });
                        });
                    }
                    $("#dropzone div.ui-wrapper").bind("mouseenter mouseleave", function(event) {
                        $("img#testing").toggleClass("over");
                    });
                }
            });
        }
    }
}).hover(function() {
    $(this).css({
        cursor: "move"
    });
});

当您将图片拖到droppable时，只有当它完全覆盖在droppable上并且没有部分覆盖在droppable的边框上时才能被接受。当然，边界属于droppable，但我问自己是否有可能解决这个问题？

我想在掉落后手动重新定位拖拽，但我想这会很麻烦。

Answer 1

我在添加到droppable后手动重新定位draggable解决了我的问题。这是编辑过的小提琴：http://jsfiddle.net/scraddy/8geEB/27/

jQuery - 容忍度：droppable的“fit”不关心droppable的边框设置

1 个答案: