Home/ Questions/Q 6763639
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T14:30:01+00:00

Im using this .sortable function on my list. My problem is that I want

  • 0

Im using this .sortable function on my list. My problem is that I want it to show the move cursor when the drag and drop is being used, and the pointer cursor only on hover. I have my css calling the cursor:pointer on hover, but it does not seem to show the move cursor at all. Everything else works fine. Code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/>
    <link rel="stylesheet" href="blah.css" type="text/css" />
    <script type="text/javascript" charset="UTF-8">
    $(document).ready(function()
    {
    $("#sortable").sortable({
        /*helper: 'clone', Tried this =(*/
        distance: 5,
        delay: 300,
        opacity: 0.6,
        cursor: 'move',
        update: function() {}
    });
    });
    </script>
    </head>
    <body>
    <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
    </ul>
    </body>
    </html>

Seperate css doc contains:

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.1em; line-height: 18px; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }

/* HERE'S THE IMPORTANT STUFF! */
#sortable li:hover {
    cursor: pointer;
}

#sortable li.ui-sortable-helper {
    cursor: move;
}

Any help would be greatly appreciated. Thanks in advance. =)

Perhaps a little more information. Its a db populated list from a while statement. each list item is a link, so I want it to display the {cursor: Pointer;} option. But when it is dragged i need it to display the {cursor: move;}. I would have thought that the code above would do it but its not working. I confused myself with the first post so thought i would clarify this a little better.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem seems to be, that your CSS setting is used across all states.

    You can get around this by setting the cursor for “dragging” as well via CSS:

    #contentLeft li:hover {
    cursor: pointer;
}

#contentLeft li.ui-sortable-helper{
    cursor: move;
}

    Here’s an example: http://jsfiddle.net/mWYEH/

    • 0