Question

我知道这应该很简单，但我已经剥夺了几乎所有东西。

我的drop函数触发，一切似乎都正确，但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的{{3}}增加到.dvaction.drop-hover或.ui-droppable.drop-hover。这样做，它将覆盖现有的背景颜色和边框：

the specificity

.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（两个类选择器）
.dvaction.drop-hover - 0,0,2,0（两个类选择器）

由于CSS的级联性质，如果选择器具有相同的特异性，那么最后出现的那个（即样式表中最低的那个）将覆盖前一个（因为样式表从上到下进行解析）。

附注：

详细了解Updated Example。
有CSS特异性计算器，例如CSS specificity at MDN。

Answer 2

$（＆＃34; .dvcontact＆＃34）。可拖动（{ 帮手：＆＃39;克隆＆＃39; }）;

  $(".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);
    };

非常简单的jquery droppable hoverClass无法正常工作

2 个答案: