HTML-ссылки остаются даже после "перемещения" с помощью jQuery?
У меня был сайт с ярлыками ("плитками") для разных сайтов.
Теперь у меня есть сценарий, который позволяет сохранять положение "плиток" в 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
курсор при наведении на ссылки, когда не в режиме редактирования.
Есть ли способ, ссылки можно убрать со своих исходных позиций?
2 ответа
Ты используешь firebug&&firefox? потому что, как я вижу с помощью firebug в консоли, у вас есть некоторые элементы li, внутри которых есть якорный тег, и это остается, когда вы его перемещаете! так что, вероятно, они определены в CSS или где-то из ранее.
взглянуть:
Я изменил размер изображения, потому что у меня есть широкий экран.
Похоже, причина этого в том, что у вас есть 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
тег
Дайте этому вихрь и посмотрите, работает ли он.