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

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

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

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

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

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

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

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

Javascriptでスクロールを制御する

自分で実装しようと思ったのですが、すでにそういうスクリプトを書いている人がいました。

誰しもがやっているような処理なので、特に人気があるわけでもなさそうです。

https://github.com/jamesplease/prevent-scroll

Javascriptで配列のデータを空にする方法

一番簡単なのはこの方法。

let array1 = ['banana', 'orange', 'apple']
array1 = []

ただし、これだとオブジェクトの参照渡しなどでは使えません。

let array2 = ['banana', 'orange', 'apple']
array2.splice(0, array2.length)

配列の中身を全て消す方法だと回避できます。

個人的には、かなりアナログな感じがしてダサいと思っていますが。

Javascirptのdeep copy

lodashが一番簡単です。
ライブラリ依存が気になるかもしれませんが、何かしらのパッケージを入れずに開発することのも大変なので割り切ってしまってもいいと思います。

import _ from 'lodash'
_.cloneDeep(value)

nedbで同期をとるにはnedb-promiseが便利

nedbはデフォルト非同期処理になります。

これは体感速度では有利な反面、思わぬところでnullになったりするデメリットもあります。

nedb-promiseを使えば、非同期処理を簡単に設定することができます。

https://www.npmjs.com/package/nedb-promise