jQuery - толерантность: 'fit' для droppable не заботится об установке границ для droppable - PullRequest
Новая
       4

jQuery - толерантность: 'fit' для droppable не заботится об установке границ для droppable

0 голосов
/ 07 января 2012

Я занимаюсь разработкой небольшого инструмента, и он работает до сих пор, но я мешаю тому факту, что элемент сбрасывания (с параметром 'допуск', установленным на 'fit'), очевидно, не заботится о границе элемента сбрасывания.

См. Здесь: 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"
    });
});

При перетаскивании изображения в раскрывающееся изображение оно должно быть принято только тогда, когда оно полностью надкапли и ничего не выходят за границу капли.Граница, конечно же, относится к объекту dropable, но я спрашиваю себя, может быть, есть ли обходной путь для этого?

Я думал о ручном изменении положения перетаскиваемого объекта после отбрасывания, но, думаю, это будет громоздким.

1 Ответ

0 голосов
/ 13 января 2012

Я решил свою проблему с помощью ручного изменения положения перетаскиваемого объекта после добавления в сбрасываемое.Вот отредактированная скрипка: http://jsfiddle.net/scraddy/8geEB/27/

...