HTML links remain even after being "moved" with jQuery?

Question

I was have a site here with shortcuts ("tiles") to different websites here.

Now, I have a script that allows for the storage of the position fo the "tiles" into a cookie so that when a user returns back to the website at a later date, their tile placement is saved.

Here is that script:

$(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');
    });
});

Now, upon first loading the website without previously visiting, the tiles are all aligned it a grid 5 tiles wide, and 2 tiles tall.

Upon clicking the Edit button, the tiles become draggable and resizable.

So, after clicking the new Done button and then quitting the browser window, and then returning to the website in a new browser window, the position is saved (sometimes this gets messed up as well), but there are "invisible" links of sorts, left over form the original grid of tiles.

Why is this happening. For instance, say on your original edit you moved the upper-left Google tile from its original position and placed it underneath the YouTube tile.

Then, when you come back, and mouse over the position on the browser window where the Google tile used to be, you can still click through as if it was still there. You can easily tell this, because I have CSS set to show a pointer cursor when hovering over the links while not in edit mode.

Is there a way, the links can me removed from their original positions?

Answer 1

do you use firebug&&firefox? because as i can see with firebug in console, you have some li elements wich have anchor tag inside and thats whats left when you move it! so probably they defined in css or somewhere from before.

take a look:

i resized image because i have wide screen.

Answer 2

It looks like the reason it is doing that is because you have the div inside the li being used to drag around. You should instead us the LI tag as the drag-able object. That way it'll drag the anchor as well.

so your html should be similar to this when rendered:

<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>

So place the ID and the class .tile on the li tag

Give that a whirl and see if it works.