jquery - クリック、マウスオーバー、マウスアウトがドラッグ可能と競合する

Question

私はjqueryが初めてです。クリックすると特定のフレームにページが表示される、タブのような外観を作りたかったのです。タブもドラッグ可能にしたかったのです。ただし、ドラッグ可能な機能を導入したため、マウスオーバー、マウスアウト、クリックが機能しません。つまり、要素がドラッグされると、要素は mouseenter、mouseout、およびクリックに応答しません。コードを参照してください。問題に対処する投稿を見逃してしまったことをお詫びします。

$(document).ready(function() {

$('li').mouseover(function() {  $(this).attr('class', 'tabTdColorChange'); }
).mouseleave(function() {

    if (!$(this).hasClass('myselected')) {
        $(this).attr('class', 'tabTdColorOriginal');
    }
});


    $('li').draggable({ connectToSortable: "#tabTable", containment: "parent"}).click(function () {
    var $li_id = $(this).attr('id');

    $(this).addClass('myselected tabTdColorChange');
    $(this).siblings('.myselected').removeClass('myselected').addClass('tabTdColorOriginal');
    $('iframe[id*="' + $li_id + '"]').attr('class', 'contentframe');
    $('iframe:not([id*="' + $li_id + '"])').attr('class', 'contentframehide');
});
$(function() {
    $("#tabTable").sortable();

});

});