logo标签列表

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

jquerycss
18

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

分离的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;}。我本以为上面的代码会做到这一点，但它没有起作用。我在第一篇帖子中搞糊涂了，所以想更清楚地说明一下。
您可以编辑问题并添加其他信息，而不是将其作为评论添加。评论更多是为了让其他人要求更多信息来帮助他们回答。 - a'r
完成后，如果有机会，您可以删除注释。 - polarblau
抱歉，我还是对这个网站比较新。 =) - banjo
5个回答
33

问题似乎是你的CSS设置被应用于所有状态。

你可以通过使用CSS设置“拖拽”时的光标来解决这个问题：

#contentLeft li:hover {
    cursor: pointer;
}

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

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

2
太好了！非常感谢。=）我会向我的孙子孙女讲述你的故事。 - banjo
好的，看起来我错了。 它不再工作了。 我已编辑上面的帖子，并提供了我所拥有的内容（测试用模拟版本）。 你能看出我哪里做错了吗？ - banjo
不，对我来说似乎没问题，如果我测试它可以工作。你可能在其他地方覆盖了样式。你有把项目放到网上吗？ - polarblau
目前只在本地测试过。我刚刚在IE、Opera和FF中进行了测试，现在它按预期工作。但是在Chrome中不行。然而，在jsFiddle中，Chrome的效果与预期相同。由于某种原因，Chrome会向“body”添加{cursor: auto;}。这是否会影响它？ - banjo
有没有重要的原因，为什么在:hover伪类上添加cursor: pointer;？这通常应用于无状态规则。 - WoodrowShigeru
显示剩余2条评论
2

找到了一种更温和的方法来做这件事：

#contentLeft li:not(.ui-sortable-helper) {
    cursor: pointer;
}
1
提醒其他可能尝试使用:not()的人，该选择器在旧版浏览器中不被支持。如果这对你造成了问题，请参考http://www.w3schools.com/cssref/sel_not.asp。 - praneetloke
1

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

.ui-sortable-handle {
    cursor: pointer
}

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

试试这个：

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

当可拖动的元素悬停在可放置区域上时，它将向用户指示。

0
<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中删除。因为我也遇到了同样的问题。我只是按照我在这里写的做。

4
请不要使用内联样式，尤其是不要覆盖在样式表中定义的样式。虽然这样做能够有效，但它会降低代码的可维护性。这是因为内联样式的优先级更高。 - polarblau
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接