我在我的列表中使用这个.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 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; }
任何帮助将不胜感激.提前致谢. =)
也许多一些信息.它是一个来自while语句的数据库填充列表.每个列表项都是一个链接,所以我希望它显示{cursor:Pointer;}选项.但是当它被拖动时,我需要它来显示{cursor:move;}.我会以为上面的代码会做,但它不工作.我困惑了自己的第一个帖子,所以以为我会澄清一点好一点.
解决方法
问题似乎是,您的CSS设置在所有州使用.
您可以通过设置光标“拖动”以及通过CSS来解决此问题:
#contentLeft li:hover { cursor: pointer; } #contentLeft li.ui-sortable-helper{ cursor: move; }
这里有一个例子:http://jsfiddle.net/mWYEH/