gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 12:03:57 24 4
gpt4 key购买 nike

代码笔在这里: 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 调整大小的图像在拖动事件期间弹出为全尺寸。

最佳答案

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

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

关于javascript - Dragula 拖动嵌套图像不会保持样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35816430/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com