jQuery UI可排序和：用於處理的活動鼠標光標

我試圖使用Sortable來重新排列列表項。我爲列表中的每個項目提供了一個句柄，其中包含:hover和:active css光標設置，以便當用戶將鼠標懸停在句柄上（並在拖動時）時光標發生更改。jQuery UI可排序和：用於處理的活動鼠標光標

<html> 
    <head> 
    <style> 
     span { width: 20px; background: red } 
     span:hover { cursor: -moz-grab; } 
     span:active { cursor: -moz-grabbing; } 
    </style> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
    <script> 
     $(function(){ 
     $('#sortable').sortable({ handle: 'span' }); 
     $('#sortable span').disableSelection(); 
     }); 
    </script> 
    </head> 
    <body> 
    <ul id="sortable"> 
     <li><span>grab 0 here</span> I'm 0!</li> 
     <li><span>grab 1 here</span> I'm 1!</li> 
     <li><span>grab 2 here</span> I'm 2!</li> 
     <li><span>grab 3 here</span> I'm 3!</li> 
     <li><span>grab 4 here</span> I'm 4!</li> 
     <li><span>grab 5 here</span> I'm 5!</li> 
     <li><span>grab 6 here</span> I'm 6!</li> 
     <li><span>grab 7 here</span> I'm 7!</li> 
    </ul> 
    </body> 
</html>

問題是:active光標停止工作。我不知道爲什麼，它在我不使用sortable時起作用，但之後當我在螢火蟲中彈出時，我可以看到:hover光標正在被應用，但沒有轉移到:active。（爲了簡單起見，我在上面的示例中使用了-moz-grab和-moz-grabbing，它們不適用於所有瀏覽器）。

任何想法可能會出錯？

來源

2011-11-28 rampion

好吧，我想出了一個黑客來解決我的問題。這是個黑客，所以如果任何人有更好的東西，讓我知道。

基本上，我拋棄了:active，贊成在mousedown上添加並在mouseup上刪除的自定義類。

<html> 
 

 
<head> 
 
    <style> 
 
    span { 
 
     width: 20px; 
 
     background: red 
 
    } 
 
    span:hover { 
 
     cursor: -moz-grab; 
 
    } 
 
    .grabbed:hover { 
 
     cursor: -moz-grabbing; 
 
    } 
 
    </style> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 
    <script> 
 
    $(function() { 
 
     $('#sortable').sortable({ 
 
     handle: 'span' 
 
     }); 
 
     $('#sortable span').disableSelection(); 
 
     $('#sortable span').mousedown(function() { 
 
     $(this).addClass('grabbed') 
 
     }); 
 
     $('#sortable span').mouseup(function() { 
 
     $(this).removeClass('grabbed') 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <ul id="sortable"> 
 
    <li><span>grab 0 here</span> I'm 0!</li> 
 
    <li><span>grab 1 here</span> I'm 1!</li> 
 
    <li><span>grab 2 here</span> I'm 2!</li> 
 
    <li><span>grab 3 here</span> I'm 3!</li> 
 
    <li><span>grab 4 here</span> I'm 4!</li> 
 
    <li><span>grab 5 here</span> I'm 5!</li> 
 
    <li><span>grab 6 here</span> I'm 6!</li> 
 
    <li><span>grab 7 here</span> I'm 7!</li> 
 
    </ul> 
 
</body> 
 

 
</html>

來源

2011-11-28 22:10:21 rampion

<html> 
 

 
<head> 
 
    <style> 
 
    .grab { 
 
     cursor: hand; 
 
     cursor: grab; 
 
     cursor: -moz-grab; 
 
     cursor: -webkit-grab; 
 
    } 
 
    .grabbing { 
 
     cursor: grabbing; 
 
     cursor: -moz-grabbing; 
 
     cursor: -webkit-grabbing; 
 
    } 
 
    </style> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 
    <script type="text/javascript"> 
 
    $(function() { 
 
     $(document).on('mousedown mouseup', '.grab, .grabbing', function(event) { 
 
     $(this).toggleClass('grab').toggleClass('grabbing'); 
 
     }); 
 
     $('#drag').draggable(); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="drag" class="grab" style="width: 200px;height:200px;">Grab Me</div> 
 
</body> 
 

 
</html>

無需單獨的處理器與新的。對/ .off jQuery函數

來源

2012-01-20 00:53:58 oLinkWebDevelopment

您的片段似乎不再奏效 –

有點晚了答案，但你可以使用jQuery UI sortableoption cursor

$('#sortable').sortable({ 
    cursor: "grabbing" 
});

所以你可以避免額外的jQuery和CSS。

<html> 
    <head> 
    <style> 
     span { width: 20px; background: red } 
     span:hover { cursor: -moz-grab; } 
    </style> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
    <script> 
     $(function(){ 
     $('#sortable').sortable({ 
      handle: 'span', 
      cursor: 'grabbing' 
     }); 
     $('#sortable span').disableSelection(); 
     }); 
    </script> 
    </head> 
    <body> 
    <ul id="sortable"> 
     <li><span>grab 0 here</span> I'm 0!</li> 
     <li><span>grab 1 here</span> I'm 1!</li> 
     <li><span>grab 2 here</span> I'm 2!</li> 
     <li><span>grab 3 here</span> I'm 3!</li> 
     <li><span>grab 4 here</span> I'm 4!</li> 
     <li><span>grab 5 here</span> I'm 5!</li> 
     <li><span>grab 6 here</span> I'm 6!</li> 
     <li><span>grab 7 here</span> I'm 7!</li> 
    </ul> 
    </body> 
</html>

來源

2015-09-20 13:47:05

這似乎仍然沒有解決問題 –

@ 99Problems-Syntaxain'tone你嘗試過什麼版本的jqueryui，但沒有工作？答案是1.5歲......並且從那以後就沒有使用過 –

如果您正在使用jQuery UI的，最簡單的方法是使用CSS類：

.draggable-item { 
    cursor: pointer; // Fallback 
    cursor: -webkit-grab; 
} 

draggable-item:active, 
draggable-item.ui-draggable-dragging { 
    cursor: -webkit-grabbing; 
}

來源

2017-04-11 13:25:06

jQuery UI可排序和：用於處理的活動鼠標光標

回答

相關問題