Jquery可排序的拖放不显示“移动”光标

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.

我在我的列表上使用这个.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="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:

单独的css doc包含：

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

也许更多信息。它是一个来自while语句的db填充列表。每个列表项都是一个链接，所以我希望它显示{cursor：Pointer;}选项。但是当它被拖动时我需要它来显示{cursor：move;}。我本以为上面的代码可以做到，但它不起作用。我把自己和第一篇文章搞糊涂了，以为我会更清楚地说明这一点。

4 个解决方案

#1

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

问题似乎是，您的CSS设置用于所有州。

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/

这是一个例子：http：//jsfiddle.net/mWYEH/

#2

Found a less blunt way to do it:

找到一种不那么直率的方法：

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

Remove from css. Because i also face the same problem. and i just do what i write here

从css中删除。因为我也面临同样的问题。而我只是做我在这里写的

#4

Try this:

尝试这个：

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

It will indicate the user if the draggable if over a droppable.

它将指示用户是否可拖动如果超过可放置。

#1