1

私はリッチ テキスト エディターを作成しており、javascript によって動的に挿入された画像の左上隅に削除ボタン div を配置しようとしています。したがって、実行時に div の位置を決定する必要があります。ただし、左上隅に正確に配置することはできませんでした。これが私のコードです：

function showDeleteButton(image) {
    var rect = image.getBoundingClientRect();
    var top = rect.top + $(document).scrollTop();
    var left = rect.left + $(document).scrollLeft();
    var deleteButton = $(".delete_button")[0];
    deleteButton.style.visibility = 'visible';
    deleteButton.style.top = top + "px";
    deleteButton.style.left = left + "px";
}

どんな助けでも大歓迎です！

4

2 に答える 2

1

要素の直接の子として削除ボタンを配置できますbody。次に、ホバーした画像のオフセットを測定し、ボタンを左上隅に再配置できます。

CSS

.delete_button {
    position:absolute;
    display:none;
}

jQuery

$(function() {
    var deleteButton = $(".delete_button");
    var hovered_image = false;
    $('img').mouseenter(function(e) {
        hovered_image = this;
        deleteButton.show();
        var img = $(this);
        var offset = img.offset();
        deleteButton.css({
            top: offset.top + 'px',
            left: offset.left + 'px'
        });
    }).mouseleave(function(e) {
        if (e.relatedTarget === deleteButton[0]) {
            return;
        }
        deleteButton.hide();
        hovered_image = false;
    });
    deleteButton.mouseleave(function(e){
        if (e.relatedTarget === hovered_image) {
            return;
        }
        deleteButton.hide();
        hovered_image = false;
    });
    deleteButton.click(function(e){
        hovered_image.parentNode.removeChild(hovered_image);
        deleteButton.hide();
    });
});

JSFiddle: http://jsfiddle.net/djuVT/ - jQuery の.offset()メソッドとposition:absolute.

JSFiddle: http://jsfiddle.net/djuVT/1/ - Javascript の.getBoundingClientRect()メソッドとposition:fixed;CSSを使用した代替ソリューション

于 2013-08-17T08:31:37.767 に答える