JavaScript
CoffeeScript
jQuery
Plugin

jquery.pep.jsでコールバックが受け取れない

スムーズなドラッグ&ドロップを実現してくれる便利なjqueryプラグイン、

「Pep」を使っていて気がついたことがあったのでメモ。

このプラグインは指定した要素をドラック&ドロップなどのマウス操作に対応させ、

さらにキネティックに動かすことができるようになります。

ただし、問題点がひとつ。

指定した要素をJavacriptなどで制御したときにコールバックが受け取れない問題がありました。

たとえば、

    $(@el).pep({

cssEaseDuration: 500
rest: =>
console.log 'rest!'

とすると、マウス操作した際は操作完了後に’rest!’とでてきますが、

下記のようにマウス操作以外のなんらかのタイミングでjavascriptなどで移動させるとコールバックが機能しません。


$(@el).css({
left: 100
height: 100
})

色々調べてみると、マウス操作などではanimateメソッドで動かしているが、

CSSメソッドで動作させるとCSS3のアニメーション機能で動かしていることがわかりました。

CSS3アニメーションの完了イベントはwebkitTransitionEndなので、

下記のようにイベントを監視します。

    $(@el).on(

'webkitTransitionEnd'
(e)=>
console.log 'rest!'
)

無事コンソールに'rest!'が表示されました。

ただ複数回コールバックが呼ばれてしまうので、

完了後に適宜offするなどしてください。