Question

我正在使用jquery draggable / droppable UI。

我需要一个解决方案，当拖放项目放在正确的放置项目上时，它会捕捉到该放置项目的左上角。

目前我已经捕捉到了可丢弃物品的内部，但是它允许用户将可拖动物品掉落一半，掉落一半看起来不美观的掉落区域。

也许解决办法是找到可丢弃项目的XY坐标，然后告诉可拖动项目它是否落在这些坐标左上方的右侧区域位置。如果这看起来像是正确的解决方案，我不知道如何编写它，因为我的jQuery知识是有限的。

请看看我的JS小提琴：

MY CURRENT JS

$(document).ready(function () {

$(".draggable").draggable({
    snap: ".droppable",
    snapMode: "inner",
    revert: "invalid"
});
//, snapTolerance: 30

var answered = 0;

function snapDrop(e, ui) {
    var snap = $(this);
    snap.closest(".rowWrap").addClass("rowSelected", 500);
    snap.closest(".rowWrap").find(".tick").fadeIn(500);
    snap.closest(".rowWrap").find(".wordBg").css({
        'background-color': '#ffd503',
        'border': 'solid 1px #ffd503',
        '-moz-box-shadow': 'none',
        '-webkit-box-shadow': 'none',
        'box-shadow': 'none'
    });
    $("#lightBox").delay(600).fadeIn(500);
    $("#lightBox").load(snap.data("lightbox"));

    // when complete     
    answered++;
    if (answered == $(".rowMid .droppable").length) {
        $(".comp").delay(1100).fadeIn(500);
        $(".dragBehind").delay(1100).fadeOut(500);
        $(".arrowBG").delay(1100).css('background-image', 'none');
    }
}

function snapAccept(ele) {
    var snap = $(this);
    //Checks if the dragged element has a class with the name that was used in
    //the data-accept attribute of the span 
    return ele.hasClass(snap.data("accept"));
}

$(".rowMid .droppable").droppable({
    accept: snapAccept,
    drop: snapDrop
});

$(".loadForm").click(function () {
    $("#lightBox2").fadeIn(500);
    //$("#lightBox2").load("comp-form.html");
});
$(".formBoxClose").click(function () {
    $('#lightBox2').hide();
});
});

jQuery Draggable / droppable对齐左上角

0 个答案: