Jquery сортируемое перетаскивание, не показывающее курсор "move"

Я использую эту .sortable функцию в моем списке. Моя проблема в том, что я хочу, чтобы он показывал курсор перемещения при использовании перетаскивания и курсор указателя только при наведении. У меня есть css, вызывающий курсор: указатель на зависание, но он вообще не показывает курсор перемещения. Все остальное отлично работает. Код ниже.

<!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="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css'; return false;" 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>

В отдельном документе css содержится:

#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 THE IMPORTANT STUFF! */
#sortable li:hover {
    cursor: pointer;
}

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

Любая помощь будет принята с благодарностью. Заранее спасибо. =)

Возможно, немного больше информации. Его db заполненный список из инструкции while. каждый элемент списка является ссылкой, поэтому я хочу, чтобы он отображал опцию {cursor: Pointer;}. Но когда он перетаскивается, мне нужно отобразить {cursor: move;}. Я бы подумал, что вышеприведенный код сделает это, но не будет работать. Я смутил себя первым сообщением, поэтому подумал, что я немного разъясню это.

Ответ 1

Проблема заключается в том, что ваш CSS-параметр используется во всех состояниях.

Вы можете обойти это, установив курсор для "перетаскивания" также через CSS:

#contentLeft li:hover {
    cursor: pointer;
}

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

Вот пример: http://jsfiddle.net/mWYEH/

Ответ 2

Найден менее тупой способ сделать это:

#contentLeft li:not(.ui-sortable-helper) {
    cursor: pointer;
}

Ответ 3

<ul id="sortable">
        <li class="ui-state-default" style="cursor:pointer;">Item 1</li>
        <li class="ui-state-default" style="cursor:pointer;">Item 2</li>
        <li class="ui-state-default" style="cursor:pointer;">Item 3</li>
</ul>

Удалить из css. Потому что я тоже сталкиваюсь с той же проблемой. и я просто делаю то, что пишу здесь

Ответ 4

Попробуйте следующее:

$element.droppable({
  over: function() {
    $('body').css('cursor','copy');
  },
  out: function() {
    $('body').css('cursor','no-drop');
  },
});

Он укажет пользователю, будет ли перетаскиваться, если над droppable.