Question

我想根据当前悬停的元素更改Helper。我试图找到悬停的元素，但我没有得到。如何获得Hovered元素？

$('.sortableTable tbody').sortable({
connectWith: ".sortableTable tr",
items: "tr:not(.disabled)",
helper: function (event, element) {
    return $('<div class="hoverCard">Valid</div>')
},
sort: function (event, ui) {
    console.log($(ui.item).data().sortableItem.currentItem.context.innerHTML);
    ui.helper = $('<div class="hoverCard">Testing</div>');

}
});

Answer 1

我已经解决了这个问题

// X＆amp; Y是当前光标位置。

// dropKeys是可拖动元素（允许移动的元素）。

//检查X＆amp; Y是否在可拖动元素上，如果“是 - 返回true”，否则“返回false”

function isValidPosition (x, y, dropKeys) {
 var isValid = false;
 var dropAreaOffset, dropAreaWidth, dropAreaHeight;
 $.each(dropKeys, function (index, item) {
    dropAreaOffset = $(item).offset();
    dropAreaWidth = $(item).width();
    dropAreaHeight = $(item).height() + 3;

    if (dropAreaOffset && dropAreaHeight && dropAreaWidth) {
        if (x > dropAreaOffset.left && x < (dropAreaOffset.left + dropAreaWidth)) {
            if (y > dropAreaOffset.top && y < (dropAreaOffset.top + dropAreaHeight)) {
                isValid = true;
                return false;  // break the $.each() loop.
            }
        }

    }
});

return isValid;

};

//基于返回值，我正在更改帮助文本：

if (isValidPosition(event.pageX, event.pageY, items)) {
    $('.floaty').addClass('drop-valid').removeClass('drop-not-valid');
}
else {
    $('.floaty').addClass('drop-not-valid').removeClass('drop-valid');
}

如何根据它悬停的元素动态更改JQuery Sortable Helper？

1 个答案: