0

「製品」のリストを作成するために、ドラッグ アンド ドロップ インターフェイスを実装しようとしています。

各「製品」には次の HTML があります。

<div class="pcontainer" data-id="1" draggable="true" ondragstart="drag(event)">

  <p class="productname">...</p>
  <img class="productimage" href="..."/>

</div>

ユーザーが製品をproductcontainerdiv 内のどこからでもドラッグしてターゲットにドロップすることで、製品を「ウィッシュリスト」に追加できるようにしたいと考えています。

ドロップ対象は以下の通りです。

<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  Drop Products Here
</div>

シンプルな HTML5 を使用してプロトタイプを実装しましたが、div 内の要素のいずれかを直接クリックすると正しくドラッグされないことを除いて、うまく機能しているようです。

Javascript:

function allowDrop(ev)
{
  ev.preventDefault();
}

function drag(ev)
{
  //get the product id (with jquery)
  var $target = $(ev.target);
  var id = $target.attr('data-id');

  ev.dataTransfer.setData("ID",id);
}

function drop(ev)
{
  ev.preventDefault();
  var id=ev.dataTransfer.getData("ID");

  //do stuff to save product to list using its id
  ...
}

このコードは、w3schools のこの単純なデモから変更しました。 内部要素のすべてのドラッグをコンテナ要素のドラッグに変換する簡単な方法はありますか?

それとも、これを行うためのより良いアプローチがありますか? (ブラウザーの互換性は、この html5 アプローチの大きな問題です)。jQuery のドラッグ可能なライブラリが存在することは知っていますが、それが本当に必要なものかどうかはわかりません。

アップデート：

JSFiddle を作成したので、実際の動作を確認できます: JsFiddle Example

パディングから1ドラッグすると警告が表示され、画像からドラッグすると警告が表示されますundefined

4

1 に答える 1

1

そうそう...jquery-uiのドラッグ可能およびドロップ可能は、まさに私が必要としていたものでした。これらのデモを見る

于 2012-12-15T00:13:57.683 に答える