拖动嵌套图像时的 Dragula 不会保持样式答案

【问题标题】：Dragula on drag the nested image doesn't stay styled拖动嵌套图像时的 Dragula 不会保持样式
【发布时间】：2016-03-05 16:09:50
【问题描述】：

在这里编写代码： http://codepen.io/jasonsawtelle/pen/jqbeXd

//HTML
<div id="drag_container">
  <div><img src="http://placehold.it/200x200/ffcc00/ffffff"/></div>
  <div><img src="http://placehold.it/200x200/99cc00/ffffff"/></div>
  <div><img src="http://placehold.it/200x200/333333/ffffff"/></div>
  <div><img src="http://placehold.it/200x200/ff0000/ffffff"/></div>
</div>

//SCSS
//Dragula
.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}

// Example
#drag_container{
    display: flex;
    div{
        img{
            height: 100px;
        }
    }
}

//JS
dragula([document.querySelector('#drag_container')])

这是一个基本设置，Dragula 正在工作，但是当我拖动一个 div 时，包含的、调整大小的 css 图像在拖动事件期间弹出到全尺寸。

【问题讨论】：

标签： javascript html css dragula

【解决方案1】：

我不确定这是否是正确的解决方案。首先，为 .gu-mirror 重新定义规则打破了 .gu-mirror 类的单一职责原则。它的工作不是以特定于元素的方式设置样式。

一个问题可能是默认情况下，该对象在拖动时会附加到 body 元素，如果该样式是基于父级定义的，它会丢失一些样式（当 is 附加到 body 容器时不是这种情况。有一个选项mirrorContainer 可以在其中设置，以便拖动的元素不会失去其样式

【讨论】：

感谢mirrorContainer 上的指针。我尝试使用mirrorContainer: document.getElementsByClassName('section-list'), 设置它，但我收到错误o.mirrorContainer.appendChild is not a function
document.getElementsByClassName('section-list') 返回一个 HtmlCollection
对不起，我的错误，document.getElementsByClassName('section-list')[0] 返回了正确的元素，但现在它根本不起作用——它只是默认附加到正文
给元素一个 ID 并使用 document.getElementById('section-list') 也返回正确的元素，但在控制台中给出错误 o.mirrorContainer is null。我到底做错了什么......
好的-这是我的问题：github.com/kalcifer/ember-dragula/issues/14。将 Dragula 初始化从构造函数移到 ngOnInit 似乎已经解决了。

【解决方案2】：

您应该将.gu-mirror img 设置为width: 100px; 以实现您想要的。结果见CodePen。

.gu-mirror是Dragula插件添加的div，用来镜像选中的元素拖到别的地方。

【讨论】：

完美！非常感谢。