jQuery Jquery可排序拖放不显示“移动”光标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7981140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery sortable drag and drop not showing 'move' cursor
提问by banjo
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 在悬停时调用 cursor:pointer，但它似乎根本不显示移动光标。其他一切正常。代码如下。
<!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 文档包含：
#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 语句的数据库填充列表。每个列表项都是一个链接，所以我希望它显示 {cursor: Pointer;} 选项。但是当它被拖动时，我需要它来显示 {cursor: move;}。我原以为上面的代码可以做到，但它不起作用。我对第一篇文章感到困惑，所以我想我会更好地澄清这一点。
回答by polarblau
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:
您也可以通过 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/
回答by Steven Schveighoffer
Found a less blunt way to do it:
找到了一个不那么直率的方法：
#contentLeft li:not(.ui-sortable-helper) {
cursor: pointer;
}
回答by Steven Schveighoffer
<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 中删除。因为我也面临同样的问题。我只是做我在这里写的
回答by yPhil
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.
如果可拖动对象位于可放置对象上方，它将指示用户。
