div要素で忠実に改行を行う

white-space: pre-wrapが便利です。

ただし、要素ない文字列に対して忠実に改行してしまうので、内容が大きくなるほど可読性が下がります。

<div class="return-text">街に出かけました。
パン屋さんで食パンを買いました。
家でトーストを焼きました。</div>
<style>
.return-text {
  white-space: pre-wrap;
}
</style>

dragイベントのドラッグフィードバック画像の消す

要素をドラッグすると、対象の画像がコピーされマウスに追随するように表示されます。

これはどこにドロップする場所を決めるのに、視覚的に便利なのですが、要素が重なって表示されている場合に、重なり部分も表示されてダサいことになります。

調べてみたところ、根本的な対処法はなく、空の要素を無理やりあてがい、無効とする方法がありました。

let dummy = documentByElement('span')
event.dataTransfer.setDragImage(dummy, 0, 0)

ここではspanにしていますが、表示されなければどんな要素でも構いません。

本当にここドキュメントは参考になります。

https://developer.mozilla.org/ja/docs/DragDrop/Drag_Operations

HTMLでユーザーの操作を無効にする

pointer-eventsというプロパティがあります。

これをnoneにすることでユーザーの操作を無効にすることができます。

style="pointer-events: none"

有効にするときはautoにします。(デフォルト値です)

style="pointer-events: auto"

使い方としては、例えば、ローディング中はユーザーが操作できないようにして、無駄な処理を避けたりすることが考えられます。

トップのエレメントに設定しておけば、全画面の適用も簡単です。