Cannot add custom cursor to sortable (jQuery, CSS)

Question

I'm trying to customize the cursor for sortable objects, but no success. However, I am able to change the cursor to 'move'. In css I have cursor: url(../images/cursor.png) and the browser successfully finds the image. For all other elements I was able to add image to cursor, but not for sortable. Below is my code for sortable. Basically I have elements in two columns and I can drag elements from one column to another and vice versa.

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"> 
	<!-- column1 -->
	<div>
	   <div id='column1' class = "column">
	   <!-- ALL CONTENT appears here -->
	   </div>
	</div>
        <!-- column1 ends here -->

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

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

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

Answer 1

I just stumbled accross the answer while looking at this article. It looks like when you use a custom cursor from a URL, you also need to specify a backup cursor from the built in ones, like so:

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

This is presumably so that the browser knows what to use if the image is unavailable.

You can also specify a list of cursors and the browser will use the first one that works:

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