非常簡單的jquery droppable hoverClass不工作

Question

我知道這應該是簡單的，但我幾乎剝去了一切。

我的拖放函數觸發，一切似乎都正確，但hoverClass不會更改div邊框和背景。

我在Chrome，Firefox和Edge下試過這個。它必須是我失蹤的東西，但我無法確定什麼。

CSS：

.drop-hover { 
    background-color: yellow; 
    border: 1px dotted red; 
    } 

#contactitems { 
    background-color: white; 
    width: 225px; 
    display: inline-block; 
    vertical-align: top; 
    border: 1px solid black; 
    } 

    #divactions { 
    background-color: white; 
    width: 375px; 
    display: inline-block; 
    vertical-align: top; 
    border: 1px solid green; 
    } 

    div.dvcontact { 
    border: dotted; 
    background-color: silver; 
    border-width: thin; 
    height: 80px; 
    width: 165px; 
    vertical-align: middle; 
    } 

    div.dvaction { 
    border: solid 1px; 
    background-color: aliceblue; 
    height: 125px; 
    width: 250px; 
    vertical-align: top; 
    } 

的Javascript

 $(".dvcontact").draggable({ 
     helper: 'clone' 
     }); 

     $(".dvaction").droppable({ 
     hoverClass: 'drop-hover', 
     drop: function (event, ui) { 
       var idmove = "" + ui.draggable.attr('id'); 
       var idinto = $(this).attr("id"); // "group"; 
       dropaction(idmove, idinto); 
      }, 
     }); 

     function dropaction (fromid,toaction) { 
      alert(fromid + " dropped into " + toaction); 
     }; 

HTML

<div id="contactitems" class="dvcontactbox"> 
    <div id="cnt-1" class="dvcontact">Last, first 
    <br />ABC Co. 
    <br />1/10/2016 | none</div> 
    <div id="cnt-2" class="dvcontact">Last, first 
    <br />ABC Co. 
    <br />1/10/2016 | none</div> 
    <div id="cnt-3" class="dvcontact">Last, first 
    <br />ABC Co. 
    <br />1/10/2016 | none</div> 
    <div id="cnt-4" class="dvcontact">Last, first 
    <br />ABC Co. 
    <br />1/10/2016 | none</div> 
</div> 

<div id="divactions" class="dvrightside"> 

    <div id="dvactgroup" class="dvaction">Group:</div> 
    <div id="dvactschedule" class="dvaction">Schedule:</div> 

</div> 

https://jsfiddle.net/cbtoolkit/k7b6oh72/

Answer 1

的類被添加;然而這是一個CSS問題。屬性被覆蓋。

問題是選擇器div.dvcontact比選擇器.drop-hover更具體。這會導致添加了背景色和邊框的選擇器div.dvcontact將覆蓋添加了.drop-hover的屬性。

您可以將選擇器.drop-hover的the specificity增加到.dvaction.drop-hover或.ui-droppable.drop-hover。在此過程中，它會覆蓋現有的背景顏色和邊框：

Updated Example

.ui-droppable.drop-hover { 
    background-color: yellow; 
    border: 1px dotted red; 
} 

下面是每個選擇的計算特異性：

• div.dvcontact - 0，0，1，1 （類別選擇器和類型選擇器）
• .drop-hover - 0,0,1,0（等級選擇器）
• .ui-droppable.drop-hover - 0，0，2，0（2類選擇）
• .dvaction.drop-hover - 0，0，2，0（2類選擇爲好）

由於CSS的級聯性質，如果選擇器具有相同的特性，因爲樣式表是從上到下分析的，所以最後出現的樣式表（即樣式表中最低的樣式表）將覆蓋上一個樣式表。

旁註：

• 瞭解更多關於CSS specificity at MDN。

• 有CSS專用計算器，如this one。

Answer 2

$（「。dvcontact」）。draggable（{0} {0} {0} {0}幫助：'克隆' }）;

$(".dvaction").droppable({ 
    hoverClass: 'drop-hover', 
    drop: function (event, ui) { 
      var idmove = "" + ui.draggable.attr('id'); 
      var idinto = $(this).attr("id"); // "group"; 
      dropaction(idmove, idinto); 
     } 
    }); 

    function dropaction (fromid,toaction) { 
     alert(fromid + " dropped into " + toaction); 
    };