HTML 链接即使在被“移动”后仍然保留。用 jQuery？

Question

我在这里有一个网站，其中包含不同网站的快捷方式（“tiles”）此处。

现在，我有一个脚本，允许将“图块”的位置存储到 cookie 中，以便当用户稍后返回网站时，他们的图块位置将被保存。

脚本如下：

$(document).ready(function () {
    //we have a hidden field which knows if the tiles are editable (1) or not (2) now just 
    //  let's make sure it is initiated with zero value because the startup state of 
    //  button will be "Edit"
    $("#editable").val('0');
    // loop through the tiles by class
    $('.tile').each(function () {
        // get the positions from cookies 
        var toppos = $.cookie('uiposy' + $(this).attr('id'));
        var leftpos = $.cookie('uiposx' + $(this).attr('id'));
        // apply saved positions
        $(this).css('top', toppos + 'px');
        $(this).css('left', leftpos + 'px');
        // get the sizes from cookies 
        var sizew = $.cookie('uisizew' + $(this).attr('id'));
        var sizeh = $.cookie('uisizeh' + $(this).attr('id'));
        // apply saved sizes
        $(this).css('width', sizew + 'px');
        $(this).css('height', sizeh + 'px');
    });
    // set the tiles as draggable
    $('.tile').
    draggable({
        containment: '#content',
        scroll: false,
        // watch out for drag action
        stop: function (event, ui) {
            // store x/y positions in a cookie when they're dragged
            $.cookie('uiposx' + $(this).attr('id'), ui.position.left, {
                path: '/',
                expires: 7
            });
            $.cookie('uiposy' + $(this).attr('id'), ui.position.top, {
                path: '/',
                expires: 7
            });
        }
    });
    // set the tiles as resizable
    $('.tile').resizable({
        maxHeight: 200,
        maxWidth: 200,
        minHeight: 100,
        minWidth: 100,
        // watch out for resize action
        stop: function (event, ui) {
            // store width/height values in a cookie when they're resized
            $.cookie('uisizew' + $(this).attr('id'), ui.size.width, {
                path: '/',
                expires: 7
            });
            $.cookie('uisizeh' + $(this).attr('id'), ui.size.height, {
                path: '/',
                expires: 7
            });
        }
    });
    //  make resiable and draggable disabled on start
    $(".tile").resizable("option", "disabled", true).removeClass('ui-state-disabled');
    $(".tile").draggable("option", "disabled", true).removeClass('ui-state-disabled');
    // function to run when the editButton is clicked
    $('#editButton').click(function () {
        // store our "state" in boolean form. 
        var state = ($("#editable").val() == 0) ? false : true;
        // state is true, this means we will disable the tiles.
        // make the button text "edit" and change the hidden #editable field value to "0"
        if (state) {
            $("#editable").val('0');
            $(this).val('Edit');
            $('.tile').css('cursor', 'pointer');
        }
        // state is true, this means we will enable the tiles.
        // make the button text "Done" and change the hidden #editable field value to "1"
        else {
            $("#editable").val('1');
            $(this).val('Done');
            $('.tile').css('cursor', 'move');
        }
        // apply the state to tiles. also remove the ui-state-disabled class to make sure they're not faded.
        $(".tile").resizable("option", "disabled", state).removeClass('ui-state-disabled');
        $(".tile").draggable("option", "disabled", state).removeClass('ui-state-disabled');
    });
});

现在，在之前未访问过的情况下首次加载网站时，图块全部对齐为 5 个图块宽、2 个图块高的网格。

单击编辑按钮后，图块将变得可拖动且可调整大小。

因此，单击新的“完成”按钮，然后退出浏览器窗口，然后在新的浏览器窗口中返回网站后，位置将被保存（有时这也会变得混乱），但是是某种“看不见的”链接，是原始瓷砖网格留下的。

为什么会出现这种情况。例如，假设在您的原始编辑中，您将左上角的 Google 图块从其原始位置移至 YouTube 图块下方。

然后，当您返回时，将鼠标悬停在浏览器窗口上 Google 图块原来所在的位置上，您仍然可以单击，就好像它仍然在那里一样。您可以很容易地看出这一点，因为我将 CSS 设置为在不处于编辑模式时将鼠标悬停在链接上时显示 pointer 光标。

有什么办法可以将链接从原来的位置删除吗？

Answer 1

你用firebug&&firefox吗？因为正如我在控制台中使用 firebug 看到的那样，您有一些 li 元素，其中有锚标记，这就是您移动它时剩下的内容！所以可能他们在 css 或之前的某个地方定义过。

看看：

我调整了图像大小，因为我有宽屏幕。

Answer 2

看起来这样做的原因是因为 li 内有 div 用于拖动。您应该使用 LI 标签作为可拖动对象。这样它也会拖动锚点。

所以渲染时您的 html 应该与此类似：

<ul>
    <li id="google" class="tile ui-draggable ui-resizable ui-resizable-disabled ui-draggable-disabled" style="left: 116px; top: 119px; cursor: pointer; " aria-disabled="true">
        <a href="http://www.google.com" target="_blank">
        <div>
        <p>Google</p>
            <div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div></div>
        </a>
    </li>
</ul>

因此，将 ID 和类 .tile 放在 li 标记上

试一试，看看它是否有效。