0
我有一個網站在這裏與快捷鍵（「瓷磚」）不同的網站here。即使在用jQuery「移動」之後，HTML鏈接仍然存在？
現在，我有一個腳本，允許將「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瓦高。
單擊Edit按鈕後，圖塊可拖動並調整大小。
因此，在點擊新的Done按鈕後，退出瀏覽器窗口，然後在新的瀏覽器窗口中返回到網站，位置被保存（有時也會出現亂碼），但有「隱形「各種各樣的鏈接，遺留下來形成瓷磚的原始網格。
爲什麼會發生這種情況。例如，假設您在原始編輯中將左上方的Google磁貼從原始位置移開，並將其放在YouTube磁貼下方。
然後，當您回來時，將鼠標懸停在Google平鋪過去的瀏覽器窗口上的位置上時，您仍然可以點擊，就好像它仍在那裏一樣。你可以很容易地說出這一點，因爲我將CSS設置爲在不處於編輯模式時懸停在鏈接上時顯示一個pointer光標。
有沒有辦法，鏈接可以從他們的原始位置刪除？
爲什麼你的示例代碼中的所有註釋都缺少````！ – 2011-01-27 22:08:09
對不起！感謝帕特里克解決這個問題！ – Qcom 2011-01-27 22:10:21