Question

我有一个基本的jQuery可排序列表，工作正常，但我现在正试图将光标更改为mousedown事件上的一个封闭的手。

第一次尝试拖动只会导致光标变为封闭式 - 元素不会拖动。随后的拖动工作正常：元素拖动和光标变为关闭的手并返回打开手onmouseup。

如果在尝试拖动之前单击鼠标一次，一切正常：拖动和光标更改

  li:hover { 
    cursor: -moz-grab;
    cursor: url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur);  
  }

  .grabbed:hover { 
    cursor: -moz-grabbing;
    cursor: url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur); 
  }
 .grabbed{ 
    cursor: url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur); 
  }      

 //---

    <ol class="sortable">
        <li>grab 0 hereI'm 0!</li>
        <li>grab 1 hereI'm 1!</li>
        <li>grab 2 hereI'm 2!</li>
    </ol>     

  //---


    $('.sortable').sortable();
    $('.sortable').disableSelection();


    $('.sortable').sortable({
        placeholder: "ui-state-highlight",
    });
    $('.sortable').disableSelection();


    $('.sortable').on("mousedown", "li", function(){
        $(this).addClass('grabbed');
        console.log("MOUSE DOWN");
    });

    $('.sortable').on("mouseup", "li",function(){
         $(this).removeClass('grabbed');
         console.log("MOUSE UP");
     });

Answer 1

这修复了它：而不是在列表元素上使用css悬停类。我放置了包含有序列表元素

/*
li:hover { 
   cursor: -moz-grab;
   cursor: url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur);  
}
*/

sortable:hover { 
   cursor: -moz-grab;
   cursor: url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur);  
}

jQuery sortable：在mousedown和up上更改游标

1 个答案: