sortable（jQuery、CSS）にカスタムカーソルを追加できません

Question

ソート可能なオブジェクトのカーソルをカスタマイズしようとしていますが、成功しません。ただし、カーソルを「移動」に変更できます。 CSSで私はカーソルを持っています：url（../ images/cursor.png）とブラウザは正常に画像を見つける。他のすべての要素については、カーソルにイメージを追加できましたが、ソート可能ではありませんでした。以下はソート可能なコードです。基本的には2つの列に要素があり、要素をある列から別の列にドラッグすることができます。

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

。

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

これはおそらくあるブラウザがあれば使用することを知っているように：あなたはURLからカスタムカーソルを使用するときに、あなたもそうのように、ものに建てられたからバックアップカーソルを指定する必要がありますように見えます画像は利用できません。

また、カーソルのリストを指定することもできますし、ブラウザが動作する最初のものを使用します。

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

Answer 2

あなたは、このコードを取ることができ、多分それはあなたを助けます。 this articleを見ながら、私はちょうど答えaccrossつまずい

よろしく、

$(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>