8

ドラッグラでは、あるコンテナから別のコンテナへの一方向コピーの可能性があります-これをUIに使用して、要素を表すシンボルをコンテナにドラッグし、「リアルディール」を生成させたいです-リアルディールは任意の異なるものですエレメント。

これのほとんどは本当に簡単でした:

dragula([].slice.call(document.querySelectorAll('.container')), {
  copy: function (el, source) {
    return source === document.getElementById('c1')
  },
  accepts: function (el, target) {
    return target !== document.getElementById('c1')
  },
  removeOnSpill: true
}).on('drop', function (el) {
    var newNode = document.createElement("div");
    newNode.textContent = "The real deal";
    newNode.classList.add("elem");
    el.parentNode.replaceChild(newNode, el);
});
.container {
  border: 1px solid #000;
  min-height:50px;
  background:#EEE;
}
.elem {
  padding:10px;
  border: 1px solid #000;
  background:#FFF;
  margin:5px;
  display: inline-block;
}
<div id="c1" class="container">
  <div class="elem">Icon1</div>
  <div class="elem">Icon2</div>
  <div class="elem">Icon3</div>
  <div class="elem">Icon4</div>
  <div class="elem">Icon5</div>
  <div class="elem">Icon6</div>
</div>
<div id="c2" class="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.css" rel="stylesheet"
      />

ご覧のとおり、これによりドロップ時に要素が置き換えられ、必要な結果が得られます。ただし、ドラッグ中のゴースト イメージは元の「シンボル」要素のままです。

ゴーストと最終結果の両方が必要な要素のように見えるように、ドラッグ時に「ドロップする」要素を置き換えることは可能ですか?

4

1 に答える 1

9

shadowドラッグ中に繰り返しトリガーされるイベントがあります。シャドウ要素を置き換えるために使用できると思いましたが、ドラグラはそれへの参照を保持しているように見えるので、削除すると機能しなくなります。

どうやらこれを回避する最もクリーンな方法は、元のゴーストを に設定し、そのdisplay: none隣に別のゴーストを配置してから、 でクリーンアップすることdragendです。

本物の影要素と偽物の影要素のサイズの違いによって配置が崩れるかどうかはわかりません。その橋に着いたら、私はその橋を渡ります。

function makeElement(){
    var newNode = document.createElement("div");
    newNode.textContent = "Wootley!";
    newNode.classList.add("elem");
    return newNode;
}

dragula([].slice.call(document.querySelectorAll('.container')), {
  copy: function (el, source) {
    return source === document.getElementById('c1')
  },
  accepts: function (el, target) {
    return target !== document.getElementById('c1')
  },
  removeOnSpill: true
}).on('dragend', function (el) {
    this._shadow.remove();
    this._shadow = null;
}).on('drop', function (el) {
    el.parentNode.replaceChild(makeElement(), el);
}).on('shadow', function(el, target){
    if (!this._shadow){
        this._shadow = makeElement();
        this._shadow.classList.add("gu-transit");
    }
    el.style.display = 'none';
    el.parentNode.insertBefore(this._shadow, el);
});
.container {
  border: 1px solid #000;
  min-height:50px;
  background:#EEE;
}
.elem {
  padding:10px;
  border: 1px solid #000;
  background:#FFF;
  margin:5px;
  display: inline-block;
}
<div id="c1" class="container">
  <div class="elem">Icon1</div>
  <div class="elem">Icon2</div>
  <div class="elem">Icon3</div>
  <div class="elem">Icon4</div>
  <div class="elem">Icon5</div>
  <div class="elem">Icon6</div>
</div>
<div id="c2" class="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.css" rel="stylesheet"
      />

于 2016-03-24T18:05:21.247 に答える