【发布时间】：2011-01-27 22:01:18
【问题描述】：
我在这里有一个网站，其中包含不同网站的快捷方式（“图块”）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 光标。
有什么办法，可以把链接从原来的位置去掉吗？
【问题讨论】：
-
为什么您的示例代码中的所有 cmets 都缺少
//？！ -
对不起！感谢帕特里克解决这个问题！
-
我在这两个徘徊！我已经编辑了这个问题并更正了它，但它需要版主的确认！希望这不是你的问题！ :P 并且你在这里写的那些 cmets 忘记了！
-
不，这不是问题 xD
标签： jquery jquery-ui hyperlink jquery-ui-resizable jquery-ui-draggable