12

ドラッグアンドドロップの処理に使用できるイベントがいくつかあります。

https://developer.mozilla.org/en/DragDrop/Drag_and_Drop

drag要素がドラッグされている間に発生するイベントがあります。ソース要素のスタイル設定またはターゲットのドロップ可能なコンテナを制御できますが、ブラウザによって作成されている「ゴースト」要素のスタイルを設定するにはどうすればよいですか？

要素がドラッグできない領域にあるときに「無効」アイコンを削除して、「カーソル移動」アイコンに置き換えたい

これが私がこれまでに持っているものです：

http://jsfiddle.net/YkaCM/

ここに画像の説明を入力してください

4

4 に答える 4

19

ドラッグが開始されたときに要素がどのように見えたかのビットマップ/コピーであるため、これを直接スタイル設定することはできません。

http://jsfiddle.net/2EvGP/

編集：

ドラッグの開始時に要素のスタイルを簡単に変更することで、実際にこれを達成するためにごまかすことができます：http: //jsfiddle.net/LULbV/

$('#draggable').bind('dragstart', function (e){

  [Set style here]

  setTimeout(function(){
    [Reset style here]
  }, 1);

  ...

});

これはChrome19で問題なく機能し、Firefox13でのドラッグ方法に応じてスタイルが変化することを示しています。ドラッグした要素のスタイルをドロップ時にリセットする必要があります。

（私はかなり高速なコンピューターを持っているので、このハックが遅いマシンでも機能するかどうかはわかりません）

于 2012-06-23T12:52:16.103 に答える
2

他のブラウザについてはよくわかりませんが、dataTransferオブジェクトには。というプロパティが含まれていますmozCursor。これにより、ドラッグ状態でカーソルを変更できますが、これはMozillaのプロパティです。

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/mozCursor

これを使用する例は、次の場所にあります。設定は、dragstart（デフォルトの「矢印」カーソルdragoverを使用するように設定）、（自動ドラッグカーソル（コピー付きの矢印）を使用するように設定）、およびdragleave（デフォルトの「矢印」矢印を使用するようにリセット）に変更されます。 'カーソル）：

http://jsfiddle.net/YkaCM/4/

次の答えを試してください
。Javascript：Webサイトでのドラッグアンドドロップ操作中にカーソルを設定するにはどうすればよいですか。

ドラッグオーバーを次のように更新しました。

$('#droppable').bind('dragover', function (e) {
  $(this).addClass('over'); // new

  ...

http://jsfiddle.net/YkaCM/1/

于 2012-06-23T12:40:56.433 に答える
1

基本的に、＃droppableの息子である新しく作成された要素に特定のスタイルを適用したいですか？

#droppable div { here your code }
于 2012-06-23T12:41:03.223 に答える
1

CSSのみを使用する別の方法:activeは、要素の疑似クラスを目的のドラッグスタイルにスタイル設定することです。ドラッグされたコピーは、この状態に基づいて作成されます。

:activeただし、ブラウザはドロップするまで元の要素を保持しているように見えるため、元の要素はこのスタイルで保持されます。これを回避するために、非常に短時間実行されるアニメーションにスタイルを割り当てることができます。ブラウザがスタイルをコピーするのに十分ですが、短すぎないでください。Chrome、Safari、Firefoxでは0.1秒で十分なようです。

https://jsfiddle.net/mLsw5ajr/

$('#draggable').bind('dragstart', function(e) {

  // http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html
  var stuff = $(this).clone().wrap('<div></div>').parent().html();

  e.originalEvent.dataTransfer.effectAllowed = 'copy';
  e.originalEvent.dataTransfer.setData('stuff', stuff);
});

$('#draggable').bind('drag', function(e) {
  // here I want to style the ghost element, not the source...    
});

$('#droppable').bind('dragover', function(e) {

  if (e.originalEvent.preventDefault)
    e.preventDefault();

  e.originalEvent.dataTransfer.dropEffect = 'copy';
  return false;
});


$('#droppable').bind('dragenter', function(e) {
  $(this).addClass('over');
});

$('#droppable').bind('dragleave', function(e) {
  $(this).removeClass('over');
});


$('#droppable').bind('drop', function(e) {

  if (e.originalEvent.stopPropagation)
    e.originalEvent.stopPropagation();

  var stuff = $(e.originalEvent.dataTransfer.getData('stuff'));
  stuff.appendTo(this);
  return false;
});
#draggable,
#droppable {
  background: #ccc;
  color: #fff;
  padding: 10px;
  margin: 10px 0 100px;
}

#draggable:active {
  animation: drag_style .1s;
}

#droppable.over {
  background: #000;
}

@keyframes drag_style {
  0% {
    background-color: #fc0;
    color: #000;
  }
  99% {
    background-color: #fc0;
    color: #000;
  }
  100% {
    background-color: #ccc;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draggable" draggable="true">
  <p>Drag me to my target</p>
</div>

<div id="droppable">
  <p>Drop me</p>
</div>

Firefoxで私が見つけた問題は:active、別の要素（ドロップなど）によってトリガーされるイベントがない場合、要素が保持されることです。これを修正するには、要素の外側でクリックをトリガーします。

于 2018-10-24T18:12:35.003 に答える