1

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 图像在拖动事件期间弹出到全尺寸。

4

2 回答 2

2

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

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

于 2016-04-08T21:03:15.450 回答
1

您应该设置.gu-mirror imgwidth: 100px;实现您想要的。结果见CodePen

.gu-mirror是 Dragula 插件添加的 div,用于镜像所选元素以拖动到其他地方。

于 2016-03-05T16:27:02.563 回答