Search code examples
javascripthtmlcssdragula

Dragula on drag the nested image doesn't stay styled

Codepen here: 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')])

It's a basic setup and Dragula is working, but when I drag a div, the contained, css resized image is popping to full-size during the drag event.

Solution

  • You should set .gu-mirror img to width: 100px; to achieve what you want. See the CodePen for the result.

    .gu-mirror is the div added by the Dragula plugin to mirror the selected element to drag somewhere else.