Question

Codepen在这里： 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调整大小的图像会弹出到全尺寸。

Answer 1

我不确定这是否是正确的解决方案。首先，重新定义.gu-mirror的规则会打破.gu-mirror clas的单一责任原则。它的工作不是以特定的方式设计风格。

一个问题可能是默认情况下，拖动它时该对象附加到正文元素，如果该样式是基于父母定义的，则会丢失一些样式（附件不是这样的情况） to body container。有一个选项mirrorContainer你可以设置，以便拖动的元素不会失去其样式

Answer 2

您应该将.gu-mirror img设置为width: 100px;以达到您想要的效果。请参阅CodePen了解结果。

.gu-mirror是由Dragula插件添加的div，用于镜像所选元素以拖动到其他位置。

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

2 个答案: