9

HTML5 の Drag/Drop API を使用してドラッグしているオブジェクトのスタイルを変更する方法を知りたいだけです。ネットで検索しましたが、何も見つかりませんでした！このチュートリアルを見ましたが、ドラッグ中のオブジェクトのスタイリングに関する情報は得られませんでした。

この問題の解決策はありますか?

また、これは可能ですか？

4

1 に答える 1

7

HTML5 では、ゴースト オブジェクトのスタイルを変更することはできませんが、DataTransfer オブジェクトから setDragImage メソッドを使用してデフォルトのゴースト オブジェクトを変更することは部分的に可能です。ここに例を作成しました（ドラッグすると、青いdivが赤いdivになります）：

  <style>
      #div1{
        background-color:blue;
        width:100px;
        height:100px;
      }
      #div2{
        background-color:red;
        width:100px;
        height:100px;
      }
    </style>
    ...
    <div id="div1" draggable="true" ></div>
    <br/>
    <div id="div2" ></div>
    <script>
      document.getElementById('div1').addEventListener('dragstart', function(event) {
        event.dataTransfer.setDragImage(document.getElementById('div2'),50,50);
      });
    </script>

http://jsfiddle.net/ftX3C/

したがって、スタイルを変更することはできませんが、ゴースト イメージとして使用する隠し要素があります。img または canvas にすることもできます。

HTML5 のドラッグ アンド ドロップに関する次のチュートリアルをお勧めします: http://www.html5rocks.com/en/tutorials/dnd/basics/

チュートリアルが終わったら、DataTransfer オブジェクトについてもお読みください: developer.mozilla.org/en-US/docs/Web/API/DataTransfer

于 2013-06-24T11:51:37.570 に答える