Akhmediyar Sailaubekov Akhmediyar Sailaubekov - 1 month ago 14
CSS Question

Cannot add custom cursor to sortable (jQuery, CSS)

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

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;
Comments