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"> 
	<!-- 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

你能接受这个代码，也许它可以帮助你。

此致

＆＃13;

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

＆＃13;

body {
	font-family: Arial, Helvetica, sans-serif;
}

table {
	font-size: 1em;
}

.ui-draggable, .ui-droppable {
	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; }

＆＃13;

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

＆＃13;

Answer 2

我在看this article的时候偶然发现了答案。看起来当您使用URL中的自定义光标时，您还需要从内置光标指定备份光标，如下所示：

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

这可能是因为如果图像不可用，浏览器就知道要使用什么。

您还可以指定游标列表，浏览器将使用第一个游标：

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

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

2 个答案: