1

最初の質問ですので、お詫びを受け入れて、ここで何かがSOエチケットを破っているのかどうか教えてください

可変数のファイルアップロードフィールドを持つCMSページ編集フォームに取り組んでいますが、この質問の目的のために、スロットと呼ばれる4つのアップロードフィールドがあるとしましょう。各スロットは、特定のタイプのファイルのみを受け入れることができます。例：

  1. jpg、gif、pngを受け入れます
  2. pngを受け入れる
  3. jpg、gif、pngを受け入れます
  4. PDFを受け入れます

ユーザーがアップロードされたファイルを再配置できるようにしたいのですが、これを実現するためにjQueryUIのSortableを使用しています。これが私が立ち往生しているところです。ドラッグ中、ファイルは対応するファイルタイプのスロットでのみ許可されるべきです。したがって、スロット1のjpgファイルはスロット3にのみ移動でき、スロット3のpngファイルはスロット1またはスロット2のいずれかに移動できます。スロット4のpdfはまったく移動できません。

これが私のセットアップを示すフィドルです。

jQuery：

$(".slots").sortable({
  cursor: "move",
  placeholder: 'ui-state-highlight',
  items: ".slot",
  update: function (sorted) {
    // ajax magic omitted for the sake of brevity.
  }
});

HTML：

<ul class="slots">
  <li class="slot accept-jpg accept-gif accept-png" id="sort_1">
    <div class="is-jpg">{jpg}</div>
  </li>
  <li class="slot accept-png" id="sort_2">
    <div class="is-png">{png}</div>
  </li>
  <li class="slot accept-jpg accept-gif accept-png" id="sort_3">
    <div class="is-empty"><input type="file" /></div>
  </li>
  <li class="slot accept-pdf" id="sort_4">
    <div class="is-pdf">{pdf}</div>
  </li>
</ul>

何か考え/アイデアはありますか？助けてくれてありがとう！

4

1 に答える 1

0

接続されたリストの受信/オーバーイベントにフックしてみてください。同様の質問については、https：//stackoverflow.com/a/14442218を参照してください。

しかし、どのエッジケースを実行する可能性があるのか​​わかりません。

http://johnny.github.com/jquery-sortable/#limited-targetで、ドロップを受け取るコンテナーを完全に制御できる別のソート可能なプラグインを確認してください。ただし、グリッドをサポートしていないため、適切でない場合があります。

于 2013-03-04T23:56:20.220 に答える