2017-04-04 12 views
0

カーソルをホバー上で変更することはできますが、マウスグラブを検出することは可能ですか?CSS - 要素がグラブ/ドラッグ/移動されたかどうかを検出

など。次の例でアイテムをドラッグしようとしました。私の目標は、要素が移動された場合にカーソルを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

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

を試してみてくださいここで働いフィドルです:http://jsfiddle.net/mWYEH/

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(); 
関連する問題