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するなどしてください。
Author And Source
この問題について(jquery.pep.jsでコールバックが受け取れない), 我々は、より多くの情報をここで見つけました https://qiita.com/yusukeasari/items/27133b35199afcec20dc著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .