JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<div style=" border: 1px solid blue; width: 560px; overflow:scroll;">
<p></p>
<img id="image" src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350" alt="my image" style=" border: 1em solid gray;" />
</div>
JavaScript
/* Touchy : a jQuery plugin for managing touch events in Webkit
*
* version: 1.0
*
* requires jQuery 1.4.2+
*/
(function ($) {
// public jQuery properties
$.touchyOptions = {
useDelegation: false,
/*
* To be implemented
*
press: { // the user touches the element before further interaction. maybe abstracts touchstart and mousedown?
requiredTouches: 1,
data: {},
proxyEvents: [TouchStart, TouchEnd]
},
contact: { // the user touches the element at any time during the interaction. could fire mouseenter as well as its own event, if configured to do so?
requiredTouches: 1,
triggerMouseEnter: false,
data: {},
proxyEvents: [TouchStart, TouchMove, TouchEnd]
},
tap: { // the user taps briefly on the element as the only interaction. can interrelate with doubletap.
requiredTouches: 1,
msThreshTap: 200,
data: {},
proxyEvents: [TouchStart, TouchEnd]
},
dbltap: { // the user taps twice within a short period of time on the element as the only interaction.
requiredTouches: 1,
msThreshTap: 200,
msThreshDouble: 500,
data: {},
proxyEvents: [TouchStart, TouchEnd]
},
*/
longpress: { // the user touches the element and hold his or her finger on the element for a specifed amount of time.
requiredTouches: 1,
msThresh: 800,
triggerStartPhase: false,
data: {
startDate: null
},
proxyEvents: ["TouchStart", "TouchEnd"]
},
drag: { // the user touches the element and then moves his or her finger across the screen
requiredTouches: 1,
msHoldThresh: 100,
data: {
startPoint: null,
startDate: null,
movePoint: null,
moveDate: null,
held: false
},
proxyEvents: ["TouchStart", "TouchMove", "TouchEnd"]
},
pinch: { // the user puts two fingers on the element and then either increases or decreases the distance between them.
pxThresh: 0,
data:...