Javascript 拖动时拖动嵌套图像不会保持样式

代码笔在这里：

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

您应该将.gu mirror img设置为width:100px；实现你想要的。有关结果，请参见

---

.gu mirror是Dragula插件添加的div，用于将选定元素镜像到其他位置。

我不确定这是否是正确的解决方案。首先，对《古镜》规则的重新界定，打破了《古镜法》的单一责任原则。它的工作不是以特定于元素的方式进行风格设计

---

一个问题可能是，默认情况下，当拖动该对象时，该对象会附着到实体元素，如果该样式是基于父对象定义的，则会失去一些样式设置，而当该对象附着到实体容器时，情况并非如此。有一个选项mirrorContainer，您可以在其中进行设置，以便拖动的元素不会失去其样式设置

Perfect！非常感谢。谢谢你在mirrorContainer上的指针。我已尝试使用mirrorContainer:document.getElementsByClassName'section-list'设置此项，但我收到错误o.mirrorContainer.appendChild不是functiondocument.getElementsByClassName'section-list'返回HTMLCollection抱歉，我的错误，document.getElementsByClassName'section-list'[0]返回正确的元素，但是现在它根本不起作用了——它只是默认地附加到body中，给元素一个ID并使用document。getElementById'section-list'也返回正确的元素，但在控制台中给出错误o.mirrorContainer为null。我到底做错了什么…好吧-这是我的问题：。将Dragula初始化从构造函数移动到ngOnInit似乎解决了这个问题。

//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')])