Question

我知道我可以在悬停时更改光标，但是可以检测鼠标抓取吗？

E.g。尝试拖动以下示例中的项目，我的目标是在移动元素时将光标更改为cursor: move。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
  #sortable li:hover {
    cursor: pointer;
  }
   
  #sortable li:mousedrag {
    cursor: move;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
  
    $( "#sortable" ).sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
    
  });
  </script>
</head>
<body>
 
  <ul id="sortable" class="connectedSortable">
    <li class="ui-state-default" value="1">Item 1</li>
    <li class="ui-state-default" value="2">Item 2</li>
    <li class="ui-state-default" value="3">Item 3</li>
    <li class="ui-state-default" value="4">Item 4</li>
    <li class="ui-state-default" value="5">Item 5</li>
  </ul>
  
  <button id="save">Save</button>
 
</body>
</html>

我搜索这样的东西：

  #sortable li:mousedrag {
    cursor: move;
  }

Answer 1

尝试

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

这是一个工作小提琴：http://jsfiddle.net/mWYEH/

Answer 2

jQuery UI将.ui-sortable-helper类添加到要拖动的项目中。见下面的摘录。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
  #sortable li:hover {
    cursor: pointer;
  }
   
  #sortable li:mousedrag {
    cursor: move;
  }
  #sortable li.ui-sortable-helper{
    cursor: move;
}
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
  
    $( "#sortable" ).sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
    
  });
  </script>
</head>
<body>
 
  <ul id="sortable" class="connectedSortable">
    <li class="ui-state-default" value="1">Item 1</li>
    <li class="ui-state-default" value="2">Item 2</li>
    <li class="ui-state-default" value="3">Item 3</li>
    <li class="ui-state-default" value="4">Item 4</li>
    <li class="ui-state-default" value="5">Item 5</li>
  </ul>
  
  <button id="save">Save</button>
 
</body>
</html>

Answer 3

我只需要改变

$( "#sortable" ).sortable({
    connectWith: ".connectedSortable"
}).disableSelection();

到此：

$( "#sortable" ).sortable({
    cursor: 'move',
    connectWith: ".connectedSortable"
}).disableSelection();

CSS - 检测元素是否被抓取/拖动/移动

3 个答案: