1

ページ ビルダー テンプレート エディターに似たページがあります。Dragula.JSをドラッグ アンド ドロップのプラグインとして使用し、そのメソッド copy を使用して他のコンテナーから要素をコピーしました。これは次のようになります。 ここに画像の説明を入力

問題は、右側の列からドラッグして左側のボックスに配置すると、右側の列にある要素が正確にコピーされることです。これは私のコードです:

<div id="2col" class="collapse column-choices">
 <a href="#" class="list-group-item">
        <div class="row">
          <div class="layoutBorder one-half"></div>
          <div class="layoutBorder one-half"></div>
        </div>
      </a>
      <a href="#" class="list-group-item">
        <div class="row">
          <div class="one-four layoutBorder"></div>
          <div class="three-four layoutBorder"></div>
        </div>
      </a>
      <a href="#" class="list-group-item">
        <div class="row">
          <div class="three-four layoutBorder"></div>
          <div class="one-four layoutBorder"></div>
        </div>
      </a>
    </div>

そして私のJS：

 //  the `templateContainer is the right box container`
 dragula([document.getElementById('2col'), document.getElementById('templateContainer')], {
copy: true,
   });

物を左のボックス コンテナーにドラッグすると、次のコードが配置されます。

<a href="#" class="list-group-item">
        <div class="row">
          <div class="layoutBorder one-half"></div>
          <div class="layoutBorder one-half"></div>
        </div>
      </a>

それは私がしたいことではありません。質問は、右のコンテナから要素をコピーする方法と、左のボックスコンテナ要素に配置すると、これが私の目的に変わることです。要素を次のように変更します。

<div class="element-to-paste">
      This thing will be copy on the left box. From Right.
    </div>

私の目的を達成できる他のドラッグアンドドロッププラグインを教えてください。

4

1 に答える 1

3

あなたが求めていることを行う方法は、.drop Dragula コールバックを利用することです。

.on("drop", function(el, container, source) {}

https://github.com/bevacqua/dragula#drakeon-events

「ドロップ ゾーン」に列が 1 つしかないアプリを 1 つ作成したので、すべての要素が垂直に並べられます。並べ替え可能なリストに似ています。プロジェクトにAngularを使用し、ドロップゾーン全体でng-repeatディレクティブを使用しました。これは、データの配列をループする方法にすぎません。たとえば、次のようになります。

var data = [
{
  index: 1,
  type: 'image',
  data: 'image.jpg'
},
{ 
  index: 2,
  type: 'textblock',
  data: 'lorem ipsum, blah blah'
}]

次に、ng-repeat ディレクティブで type プロパティを読み取り、そのために HTML を挿入できます。

<div ng-if="mydata.type='image'">
  <img src='{{ mydata.data}}'>
</div>

<div ng-if="mydata.type='text'">
  <p>{{ mydata.data }}</p>
</div>

要素の正しい順序を取得するには、オブジェクトのインデックスを使用して ng-orderBy ディレクティブを使用できます。

このように、ドロップ アクションはファサードです。ドラッグした要素を DOM から実際に削除し、新しい要素に置き換えます。

Dragula は.gu-transitドラッグ中に要素にクラスを追加するため、.drop コールバック内で、ドロップ コンテナ内の DOM 要素をループし、.gu-transit を見つけて、そのインデックスを知ることができます。データ配列にプッシュするときに、正しいインデックス プロパティを割り当てます。

例として Angular を使用しています。これは私が使用したものであり、それまたは別のフレームワークを使用すると、この機能の実装に実質的に役立つと思います。ストレートなjQueryで行うのはもっと難しいと思います。

于 2016-01-26T01:12:21.703 に答える