Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

タッチデバイスで、「Drag-like Action」を実装してみた🌟

JS Bin on jsbin.com

DOM イベントに関するTipsです。

タッチデバイスの場合、touchmove の Event type (Event Handler) が実装されているので 、ドラッグというよりは、タッチ&スワイプして、そのまま要素ブロックを移動させる実装の仕方になります。

 

そこで、今回は、スマホアプリ等にもたまに実装されている、

「一定期間タッチし続けると、イベントが発動する」

というアクションを、JavaScriptで実装してみました。

上記デモでは「青ブロックを1秒以上タッチし続けると、赤ボーダーがブロック周りに出現し、ブロックが移動可能になる」というものです。

 

「やってみたい!✨」と思ってコードをいじってみた所、実現できたので、大変満足であります(つ´ω`c)✨✨♪♪

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️