Question

在下面的HTML中，我有两个div面板。一个是侧面有可拖动元素，另一个是主区域，可拖动的div应该被丢弃。当拖动开始时，我希望主区域淡出，除了几个div，这些div是用每个拖动事件动态计算的。我使用的是.fade-out类，但它并没有真正起作用，因为实际的应用程序有太多的div作为主区域的子节点，所以浏览所需div的HTML集合是行不通的。那么最好只使用JavaScript的方法是什么？

<div class="side-panel">
    <div draggable="true" ondrag="drag(event)"></div>
    <div draggable="true" ondrag="drag(event)"></div>
    <div draggable="true" ondrag="drag(event)"></div>
    <div draggable="true" ondrag="drag(event)"></div>
</div>
<div class="main-area">
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>


.fade-out {
    filter: alpha(opacity=80);
    opacity: 0.2;
}

Answer 1

我认为唯一可行的方法是给颜色和背景颜色赋予alpha值，而不是改变不透明度。所以，这取决于你在主区div内的每个div里面有什么。

一个例子是，考虑到你有背景颜色和/或一些文本，在每个div中，你可以给一个属性的类

.fade-out {
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.6);
}

然后，对于不透明度不变的每个div，你可以给出

.normal-opacity {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
}

Answer 2

/* 
 For demo
*/
.main-area > * {
  width  : 35px;
  height : 35px;
  display    : inline-block;
  background : purple;
}


.main-area.fade-out-unnecessary-children > :not(.wont-fade-out){
  filter: alpha(opacity=80);
  opacity: 0.2;
}

<div class="side-panel">
    <div draggable="true" ondrag="drag(event)"></div>
    <div draggable="true" ondrag="drag(event)"></div>
    <div draggable="true" ondrag="drag(event)"></div>
    <div draggable="true" ondrag="drag(event)"></div>
</div>
<div class="main-area fade-out-unnecessary-children">
    <div class="wont-fade-out" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="wont-fade-out" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

“当拖动开始时，我希望主区域淡出，除了几个div，它们是用每个拖动事件动态计算的。”
“......一个实际的应用程序有太多的div作为主区域的子项，所以浏览所需div的HTML集合是行不通的。”

1）如果您可以检测到很少的div “淡出，会添加一个类（.wont-fade-out）每个。

 <div class="wont-fade-out" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

2）在.main-area 上添加一个类（.fade-out-unwanted-children）。

<div class="main-area fade-out-unnecessary-children"> <div ondrop="drop(event)" ondragover="allowDrop(event)" class="wont-fade-out" ></div> <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> </div>

3）之后，你可以用CSS做任何事情

.main-area.fade-out-unnecessary-children > :not(.wont-fade-out){ filter: alpha(opacity=80); opacity: 0.2; }

淡出整个页面，除了纯Javascript中的一些元素

2 个答案: