Question

我在这里有一个网站，其中有快捷方式（“瓷砖”）到不同的网站here。

现在，我有一个脚本，允许将“瓷砖”的位置存储到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个瓷砖高。

点击Edit按钮后，图块变得可拖动并可调整大小。

因此，在单击新的Done按钮然后退出浏览器窗口，然后在新的浏览器窗口中返回到网站后，位置将被保存（有时这也会被搞砸），但是是“看不见的”链接，留在原始的瓷砖网格上。

为什么会这样。例如，在原始编辑中，您将左上角的Google磁贴从其原始位置移动并将其放置在YouTube磁贴下方。

然后，当您回来并将鼠标悬停在浏览器窗口上Google磁贴之前的位置时，您仍然可以点击它，就像它仍在那里一样。您可以很容易地说出这一点，因为我将CSS设置为在未处于编辑模式时将鼠标悬停在链接上时显示pointer光标。

有没有办法，链接可以从原来的位置删除吗？

Answer 1

你使用firebug＆amp;＆amp; firefox吗？因为我可以在控制台中看到firebug，你有一些 li 元素，里面有锚标记，当你移动它时会留下什么！所以他们可能是在css或之前的某个地方定义的。

看看： enter image description here

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

Answer 2

看起来这样做的原因是因为div内的li被用来拖动。您应该将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标记

上

给它一个旋转，看它是否有效。

即使在使用jQuery“移动”后，HTML链接仍然存在？

2 个答案: