1

コードペンはこちら: 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 クラスの単一責任の原則が破られます。要素に固有の方法でスタイルを設定することは仕事ではありません。

問題の 1 つは、デフォルトでは、そのオブジェクトをドラッグすると body 要素にアタッチされ、そのスタイルが親に基づいて定義されている場合はスタイリングが失われることです (ボディ コンテナーにアタッチされている場合はそうではありません。mirrorContainerできるオプションがあります。ドラッグされた要素がスタイルを失わないように設定します

于 2016-04-08T21:03:15.450 に答える
1

目的を達成するには、に設定.gu-mirror imgする必要があります。結果については、 CodePenwidth: 100px;を参照してください。

.gu-mirror選択した要素をミラーリングして別の場所にドラッグするために Dragula プラグインによって追加された div です。

于 2016-03-05T16:27:02.563 に答える