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

Javascriptのクラスで定義した要素を削除する

Classで定義しておきながら、要素そのものを削除したい時があります。

そんなときはdelete オブジェクト名.プロパティ名で削除できます。

userという名前で定義されたあるクラスのageというプロパティを削除する例です。

delete user.age

Vuexで双方向セッターを設定する

飛ばし読みしていると、ところどころはまるので注意が必要です。

https://vuex.vuejs.org/ja/forms.html

このエラーが出たときは、mutationsのメソッド名が間違っている可能性があります。

unknown mutation type

moduleごとにmutationsのメソッドの呼び出しは次のようにします。

this.$store.commit('moduleName/updateAttribute', value)

Vueでmomentを利用する

単体のモジュールとして使ってもいいですが、プラグインとして利用するのが楽です。

npm install vue-moment --save

プラグインに登録しましょう。

import moment from 'vue-moment'
Vue.use(moment)

これで好きなところで利用できるようになりました。

template内であれば

{{ $moment().format('YYYY[年]MM[月]DD[日]')} }}

のように呼出せますし、script内であれば頭にthisをつけてあげましょう。

this.$moment().format('YYYY[年]MM[月]DD[日]')}

Vue.jsに慣れていないと、意外とはまるところです。