使用帶有可拖動元素的自定義光標的問題

Question

好的，所以我有一個可拖動的元素，它包含在它的父級元素中。我試圖在拖動時添加一個自定義光標，包括當光標離開可拖動元素本身時。然後當拖動停止時，在mouseup上，光標應該返回到default。

<div id="container"> 
    <div class="draggable"></div> 
</div> 

---

$(document).ready(function() { 

    $(window).on("mouseup", function() { 
     $("*").removeClass("customcursor"); 
    }) 

    $(".draggable").on("mousedown", function() { 
     $("*").addClass("customcursor"); 
    }) 

    $(".draggable").draggable({ 
     containment: "parent", 
    }); 
}); 

---

html { 
    background: lightblue; 
} 

body { 
    background-color: teal; 
} 

#container { 
    height: 400px; 
    width: 400px; 
    background-color: black; 
} 

.draggable { 
    height: 200px; 
    width: 200px; 
    background-color: red; 
} 

.customcursor { 
    cursor: url(http://media.fluke.com/images/8-icon-30x30.gif), default; 
} 

這裏是一個工作fiddle。

但是，這給了我兩個問題。

第一個問題：拖動時，當光標移動到body元素上時，自定義光標不再有效。但是，當光標移動到html元素上時，自定義光標會起作用。無可否認，這可以通過添加一個包裝元素來解決，所以光標永遠不會在body上，但我仍然困惑爲什麼會發生這種情況。

第二個問題：在第一次拖動之後，即使.customcursor類已被刪除，光標也會卡住自定義光標。如果我添加的可拖動的start和stop事件，而不是mousedown和mouseup.customcursor類這第二個問題是可以解決的，但我想自定義光標mousedown即使拖拽不移動。

如果有人對這些問題發生的原因或解決問題的好方法有了一些瞭解，我真的很感謝幫助。

Answer 1

添加!important到的cursor變化：

.customcursor { 
    cursor: url(http://media.fluke.com/images/8-icon-30x30.gif), default !important; 
} 

身體正在通過直接的元素風格推翻：

element.style { 
    cursor: auto; 
} 

而且，由於某些原因，光標被落在了後面即使在課程被刪除後，也可以直接輸入style。 JavaScript或jQuery的刪除：

$(window).on("mouseup", function() { 
    $("*").removeClass("customcursor"); 
    //document.body.style.cursor = ""; 
    $("body").css("cursor", "") 
    console.log("mouseup"); 
}) 

小提琴：https://jsfiddle.net/ntyuuqq2/