2017-04-04 96 views
0

我知道我可以更改悬停的光标,但可以检测鼠标抓取吗?CSS - 检测元素是否被抓取/拖动/移动

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; 
    } 

回答

1

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>

0

我不得不改变

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

这样:

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