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

【问题标题】：Jquery sortable drag and drop not showing 'move' cursorJquery可排序拖放不显示“移动”光标
【发布时间】：2011-11-02 13:28:38
【问题描述】：

我在我的列表中使用这个 .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>

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

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

任何帮助将不胜感激。提前致谢。 =)

也许更多的信息。它是来自 while 语句的数据库填充列表。每个列表项都是一个链接，所以我希望它显示 {cursor: Pointer;} 选项。但是当它被拖动时，我需要它来显示 {cursor: move;}。我原以为上面的代码可以做到，但它不起作用。我对第一篇文章感到困惑，所以我想我会更好地澄清这一点。

【问题讨论】：

您可以编辑您的问题并添加其他信息，而不是将其添加为 cmets。评论更多的是让其他人向您询问更多信息以帮助他们回答。
完成了 - 如果有机会，您可以删除评论。
对不起，这个网站还是新手。 =)

标签： jquery css

【解决方案1】：

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

您也可以通过 CSS 将光标设置为“拖动”来解决此问题：

#contentLeft li:hover {
    cursor: pointer;
}

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

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

【讨论】：

完美！非常感谢。 =) 我会把你的故事告诉我的孙子们。
好吧，看来我错了。它不再工作了。我已经用我所拥有的（用于测试的模型版本）编辑了上面的帖子。你能看出我做错了什么吗？
不，对我来说似乎没问题，如果我测试它就可以工作。您可能会在不同的地方覆盖样式。你有这个项目吗？
目前仅限本地。我刚刚在ie、opera和ff中测试过。它现在按预期工作。但不是铬。然而 jsFiddle 在 chrome 中按预期工作。出于某种原因，Chrome 在“正文”中添加了一个 {cursor: auto;}。这会是什么影响它吗？
可能的。尝试添加 !important 进行测试。

【解决方案2】：

找到了一种不那么生硬的方法：

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

【讨论】：

仅供任何可能尝试使用:not() 的人参考。如果这对您来说是个问题，那么旧浏览器不支持它。 w3schools.com/cssref/sel_not.asp

【解决方案3】：

对于那些使用handle 开始拖动的人：

.ui-sortable-handle {
    cursor: pointer
}

.ui-sortable-helper .ui-sortable-handle {
    cursor: move
}

【讨论】：

【解决方案4】：

<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 中删除。因为我也面临同样的问题。我只是做我在这里写的事情

【讨论】：

请不要使用内联样式，尤其是不要覆盖样式表中定义的样式。这样做的原因是内联样式具有更高的优先级。但解决方案是以更差的可维护性为代价的。

【解决方案5】：

试试这个：

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

它会指示用户是否可拖动。

【讨论】：