我在我的列表上使用这个.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语句的db填充列表.每个列表项都是一个链接,所以我希望它显示{cursor:Pointer;}选项.但是当它被拖动时我需要它来显示{cursor:move;}.我本以为上面的代码可以做到,但它不起作用.我把自己和第一篇文章搞糊涂了,以为我会更清楚地说明这一点.
pol*_*lau 29
问题似乎是,您的CSS设置用于所有州.
你可以通过设置光标"拖动"来解决这个问题:
#contentLeft li:hover {
cursor: pointer;
}
#contentLeft li.ui-sortable-helper{
cursor: move;
}
这是一个例子:http://jsfiddle.net/mWYEH/