无法添加自定义光标可排序（jQuery的，CSS）

Question

我想自定义光标排序的对象，但没有成功。但是，我可以将光标更改为“移动”。在CSS中我有光标：url（../ images/cursor.png），浏览器成功找到图像。对于所有其他元素，我可以将图像添加到光标，但不能排序。以下是我的可排序代码。基本上我有两列中的元素，我可以从一列拖动元素到另一列，反之亦然。

var categoriesCombArr = [1, 2, 3, 4, 5 , 6, 7, 8]; 
 
var category1Arr = [1, 2, 3, 4]; 
 

 

 
$(function() { 
 
    $("#column1, #column2").sortable({ 
 
     connectWith: ".column", 
 
    }); 
 
}); 
 

 

 

 
for (i = 0; i < categoriesCombArr.length; i++) { 
 
     if (i < category1Arr.length) { 
 
      $("#column1").append("<div class='choice'><div class = 'image' id = 'choice" + i + "'></div><div class = 'imageDescription'><p>" + categoriesCombArr[i] + "</p></div> </div>"); 
 
     } else { 
 
      $("#column2").append("<div class='choice'><div class = 'image' id = 'choice" + i + "'></div><div class = 'imageDescription'><p>" + categoriesCombArr[i] + "</p></div> </div>"); 
 
     } 
 

 
    }

.choice { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 50px; 
 
    
 
    display: inline-block; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    outline: none; 
 
    border: none; 
 
    margin: auto; 
 
    font-family: SansPro-Regular; 
 
    border-radius: 10px; 
 
    background-color: rgb(181, 152, 113); 
 
    margin-top: 7px; 
 
    cursor: url(../images/cursor.png) !important; 
 
} 
 

 
.choice:hover { 
 
    background-color: #bd7737; 
 
    box-shadow: inset 0px 5px 8px 0px rgba(43, 27, 0, 0.34); 
 
    cursor: url(../images/cursor.png) !important; 
 
} 
 

 

 

 

 
#column1{ 
 
    position: relative; 
 
    width: 100px; 
 
    height: 500px; 
 
    float: left; 
 
    /*! left: 200px; */ 
 
    text-align: center; 
 
    
 
    
 
    top: 19px; 
 
    overflow: scroll; 
 
    left: 35px; 
 
} 
 

 
#column2{ 
 
    width: 100px; 
 
    height: 500px; 
 
    position: relative; 
 
    float: right; 
 
    /*! right: 200px; */ 
 
    
 
    text-align: center; 
 
    left: -36px; 
 
    overflow: scroll; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 

 
<div class = "columnsCollection"> 
 
\t <!-- column1 --> 
 
\t <div> 
 
\t <div id='column1' class = "column"> 
 
\t <!-- ALL CONTENT appears here --> 
 
\t </div> 
 
\t </div> 
 
     <!-- column1 ends here --> 
 

 
\t <div class="progress-bar"></div> 
 

 
\t <!-- column2 --> 
 
\t <div> 
 
\t <div id = 'column2' class= 'column'> 
 
\t <!-- ALL CONTENT appears here --> 
 
\t </div> 
 
\t </div> 
 
\t <!-- column2 ends here --> 
 

 
</div> 
 
<!-- columnsCollection ends heres -->

Answer 1

我只是偶然防空火炮的答案，而在寻找this article。它看起来就像当你使用自定义光标从一个网址，你还需要从内置的那些指定备份光标，就像这样：

cursor: url(../images/cursor.png), move; 

这大概是让浏览器知道如果要使用什么图像不可用。

还可以指定光标的列表，浏览器将使用该作品的第一个：

cursor: url(unavailable.png), url(../images/cursor.png), move; 

Answer 2

你能把这段代码，也许它可以帮助你。

问候，

$(function() { 
 
    $("#sortable").sortable({ 
 
     cancel: ".noSortable" 
 
    }); 
 
    
 
    $("#sortable").disableSelection(); 
 
    });

body { 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
} 
 

 
table { 
 
\t font-size: 1em; 
 
} 
 

 
.ui-draggable, .ui-droppable { 
 
\t background-position: top; 
 
} 
 

 
#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.4em; height: 18px;cursor:move; } 
 
#sortable li.noSortable{cursor:no-drop;} 
 
    #sortable li span { position: absolute; margin-left: -1.3em; }

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<ul id="sortable"> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
 
    <li class="ui-state-default noSortable">Item 2</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
 
    <li class="ui-state-default noSortable">Item 4</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
 
    <li class="ui-state-default noSortable">Item 6</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 
 
</ul> 
 
<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>