Question

我在列表中使用这个.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;}。我本以为上面的代码可以做到，但它不起作用。我把自己和第一篇文章搞糊涂了，以为我会更好地澄清这一点。

Answer 1

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

你可以通过设置“拖动”光标来解决这个问题：

#contentLeft li:hover {
    cursor: pointer;
}

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

以下是一个示例：http://jsfiddle.net/mWYEH/

Answer 2

找到一种不那么直率的方法：

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

Answer 3

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

Answer 4

试试这个：

for (int i=0;i<xGridCount;++i)
{
    for (int j=0;j<yGridCount;++j)
    {
        QString idStrI;
        QString idStrJ;
        idStrI.setNum(abs(xGridCount - (i)));
        idStrJ.setNum(abs(yGridCount - (j)));
        QString nameStr = idStrI + "," + idStrJ;
        TrayLayoutButton *btn = new TrayLayoutButton();
        btn->setObjectName(nameStr);
        btn->setState(TrayLayoutButton::NONE);

        btn->setSizePolicy(QSizePolicy::Fixed,QSizePolicy::Fixed);
        btn->setFixedSize(QSize(50,50));

        connect(btn,SIGNAL(clicked()),this,SLOT (handleButton()));

        ui->gridLayout->addWidget(btn,i,j);
        ui->gridLayout->setSpacing(0);
    }
}
setLayout(ui->gridLayout);

如果超出可放置范围，它将指示用户是否可拖动。

Answer 5

对于使用handle开始拖动的用户：

.ui-sortable-handle {
    cursor: pointer
}

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

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

5 个答案: