@bagelink/vue 1.6.43 → 1.6.49

package/src/components/Zoomer.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useDebounceFn } from '@bagelink/vue'
-import { onMounted, onUnmounted, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import TapDetector from '../utils/tapDetector'
 
 // Props interface
@@ -34,278 +34,364 @@ const {
 } = defineProps<Props>()
 
 const emit = defineEmits(['update:zoom'])
-// Reactive state using $ref (vue-macros)
-const zoomElement = $ref<HTMLElement | undefined>()
-let containerWidth = $ref(1)
-let containerHeight = $ref(1)
-let containerLeft = $ref(0)
-let containerTop = $ref(0)
-let translateX = $ref(0)
-let animTranslateX = $ref(0)
-let translateY = $ref(0)
-let animTranslateY = $ref(0)
-let _zoom = $ref(zoom || 1)
-let scale = $computed({
-	get: () => zoom === undefined ? _zoom : zoom,
+// Reactive state using standard Vue composition API
+const zoomElement = ref<HTMLElement | undefined>()
+const containerWidth = ref(1)
+const containerHeight = ref(1)
+const containerLeft = ref(0)
+const containerTop = ref(0)
+const translateX = ref(0)
+const animTranslateX = ref(0)
+const translateY = ref(0)
+const animTranslateY = ref(0)
+const _zoom = ref(zoom ?? 1)
+const scale = computed({
+	get: () => zoom ?? _zoom.value,
 	set: (val) => {
-		_zoom = val
-		emit('update:zoom', _zoom)
+		_zoom.value = val
+		emit('update:zoom', _zoom.value)
 	},
 })
 
-let animScale = $ref(1)
-let lastFullWheelTime = $ref(0)
-let lastWheelTime = $ref(0)
-let lastWheelDirection = $ref<'x' | 'y'>('y')
-let isPointerDown = $ref(false)
-let pointerPosX = $ref(-1)
-let pointerPosY = $ref(-1)
-let twoFingerInitDist = $ref(0)
-let panLocked = $ref(true)
-let raf = $ref<number | undefined>()
-let tapDetector = $ref<TapDetector | undefined>()
-
-let translateXValue = $ref(0)
-let translateYValue = $ref(0)
-
-const wrapperStyle = $computed(() => {
-	translateXValue = containerWidth * animTranslateX
-	translateYValue = containerHeight * animTranslateY
+const animScale = ref(1)
+const lastFullWheelTime = ref(0)
+const lastWheelTime = ref(0)
+const lastWheelDirection = ref<'x' | 'y'>('y')
+const isPointerDown = ref(false)
+const pointerPosX = ref(-1)
+const pointerPosY = ref(-1)
+const twoFingerInitDist = ref(0)
+const panLocked = ref(true)
+const raf = ref<number | undefined>()
+const tapDetector = ref<TapDetector | undefined>()
+
+// Momentum/inertia tracking
+const velocityX = ref(0)
+const velocityY = ref(0)
+const lastMoveTime = ref(0)
+const momentumRaf = ref<number | undefined>()
+
+const wrapperStyle = computed(() => {
+	// Translation is in normalized coordinates (0.5 = half container)
+	// Convert to pixels
+	const translateXValue = containerWidth.value * animTranslateX.value
+	const translateYValue = containerHeight.value * animTranslateY.value
 	return {
 		transform: [
 			`translate(${translateXValue}px, ${translateYValue}px)`,
-			`scale(${animScale})`,
+			`scale(${animScale.value})`,
 		].join(' '),
+		transformOrigin: '50% 50%',
 	}
 })
 
-watch(() => scale, (newScale) => {
+watch(() => scale.value, (newScale) => {
 	const { x, y } = calcTranslateLimit()
-	translateX = Math.max(-x, Math.min(x, translateX))
-	translateY = Math.max(-y, Math.min(y, translateY))
-	if (1 !== newScale) {
-		panLocked = false
+	translateX.value = Math.max(-x, Math.min(x, translateX.value))
+	translateY.value = Math.max(-y, Math.min(y, translateY.value))
+	if (newScale !== 1) {
+		panLocked.value = false
 	}
 })
 
 function reset() {
-	scale = 1
-	panLocked = true
-	translateX = 0
-	translateY = 0
+	scale.value = 1
+	panLocked.value = true
+	translateX.value = 0
+	translateY.value = 0
 }
 
 defineExpose({ reset })
 
 function tryToScale(scaleDelta: number) {
-	if (disabled) {return}
-	let newScale = scale * scaleDelta
+	if (disabled) { return }
+	let newScale = scale.value * scaleDelta
 	if (zoomingElastic) {
-		if (newScale < minScale! || newScale > maxScale!) {
+		if (newScale < minScale || newScale > maxScale) {
 			let log = Math.log2(scaleDelta)
 			log *= 0.2
 			scaleDelta = 2 ** log
-			newScale = scale * scaleDelta
+			newScale = scale.value * scaleDelta
 		}
 	} else {
-		if (newScale < minScale!) {newScale = minScale!}
-		else if (newScale > maxScale!) {newScale = maxScale!}
+		if (newScale < minScale) {
+			newScale = minScale
+		} else if (newScale > maxScale) {
+			newScale = maxScale
+		}
 	}
-	scaleDelta = newScale / scale
-	scale = newScale
-	if ('image-center' !== pivot) {
-		const normMousePosX = (pointerPosX - containerLeft) / containerWidth
-		const normMousePosY = (pointerPosY - containerTop) / containerHeight
-		translateX = (0.5 + translateX - normMousePosX) * scaleDelta + normMousePosX - 0.5
-		translateY = (0.5 + translateY - normMousePosY) * scaleDelta + normMousePosY - 0.5
+	scaleDelta = newScale / scale.value
+	scale.value = newScale
+	if (pivot !== 'image-center') {
+		const normMousePosX = (pointerPosX.value - containerLeft.value) / containerWidth.value
+		const normMousePosY = (pointerPosY.value - containerTop.value) / containerHeight.value
+		translateX.value = (0.5 + translateX.value - normMousePosX) * scaleDelta + normMousePosX - 0.5
+		translateY.value = (0.5 + translateY.value - normMousePosY) * scaleDelta + normMousePosY - 0.5
 	}
 }
 
 function setPointerPosCenter() {
-	pointerPosX = containerLeft + containerWidth / 2
-	pointerPosY = containerTop + containerHeight / 2
+	pointerPosX.value = containerLeft.value + containerWidth.value / 2
+	pointerPosY.value = containerTop.value + containerHeight.value / 2
 }
 
 function onPointerMove(newMousePosX: number, newMousePosY: number) {
-	if (isPointerDown) {
-		const pixelDeltaX = newMousePosX - pointerPosX
-		const pixelDeltaY = newMousePosY - pointerPosY
-		if (!panLocked) {
+	if (isPointerDown.value) {
+		const currentTime = Date.now()
+		const pixelDeltaX = newMousePosX - pointerPosX.value
+		const pixelDeltaY = newMousePosY - pointerPosY.value
+
+		if (!panLocked.value) {
+			// Calculate velocity for momentum
+			const timeDelta = currentTime - lastMoveTime.value
+			if (timeDelta > 0) {
+				velocityX.value = pixelDeltaX / timeDelta
+				velocityY.value = pixelDeltaY / timeDelta
+			}
+
 			const translateLimit = calcTranslateLimit()
 			const maxTranslateX = translateLimit.x
 			const maxTranslateY = translateLimit.y
-			const newTranslateX = translateX + pixelDeltaX / containerWidth
-			const newTranslateY = translateY + pixelDeltaY / containerHeight
-			translateX = Math.max(-maxTranslateX, Math.min(maxTranslateX, newTranslateX))
-			translateY = Math.max(-maxTranslateY, Math.min(maxTranslateY, newTranslateY))
+			const newTranslateX = translateX.value + pixelDeltaX / containerWidth.value
+			const newTranslateY = translateY.value + pixelDeltaY / containerHeight.value
+
+			translateX.value = Math.max(-maxTranslateX, Math.min(maxTranslateX, newTranslateX))
+			translateY.value = Math.max(-maxTranslateY, Math.min(maxTranslateY, newTranslateY))
+
+			lastMoveTime.value = currentTime
 		}
 	}
-	pointerPosX = newMousePosX
-	pointerPosY = newMousePosY
+	pointerPosX.value = newMousePosX
+	pointerPosY.value = newMousePosY
+}
+
+function applyMomentum() {
+	if (Math.abs(velocityX.value) < 0.01 && Math.abs(velocityY.value) < 0.01) {
+		velocityX.value = 0
+		velocityY.value = 0
+		if (momentumRaf.value) {
+			cancelAnimationFrame(momentumRaf.value)
+			momentumRaf.value = undefined
+		}
+		return
+	}
+
+	const translateLimit = calcTranslateLimit()
+	const newTranslateX = translateX.value + velocityX.value * 16 / containerWidth.value
+	const newTranslateY = translateY.value + velocityY.value * 16 / containerHeight.value
+
+	translateX.value = Math.max(-translateLimit.x, Math.min(translateLimit.x, newTranslateX))
+	translateY.value = Math.max(-translateLimit.y, Math.min(translateLimit.y, newTranslateY))
+
+	// Apply friction
+	velocityX.value *= 0.95
+	velocityY.value *= 0.95
+
+	momentumRaf.value = requestAnimationFrame(applyMomentum)
 }
 
 const onInteractionEnd = useDebounceFn(() => {
 	limit()
-	panLocked = 1 === scale 
-}, 100)
+	panLocked.value = scale.value === 1
+
+	// Start momentum animation if there's significant velocity
+	if (!panLocked.value && (Math.abs(velocityX.value) > 0.1 || Math.abs(velocityY.value) > 0.1)) {
+		if (momentumRaf.value) cancelAnimationFrame(momentumRaf.value)
+		applyMomentum()
+	} else {
+		velocityX.value = 0
+		velocityY.value = 0
+	}
+}, 50)
 
 function limit() {
-	if (scale < minScale!) {
-		scale = minScale!
-	} else if (scale > maxScale!) {
-		tryToScale(maxScale! / scale)
+	if (scale.value < minScale) {
+		scale.value = minScale
+	} else if (scale.value > maxScale) {
+		tryToScale(maxScale / scale.value)
 	}
 
 	if (limitTranslation) {
 		const translateLimit = calcTranslateLimit()
-		if (Math.abs(translateX) > translateLimit.x) {
-			translateX *= translateLimit.x / Math.abs(translateX)
+		if (Math.abs(translateX.value) > translateLimit.x) {
+			translateX.value *= translateLimit.x / Math.abs(translateX.value)
 		}
-		if (Math.abs(translateY) > translateLimit.y) {
-			translateY *= translateLimit.y / Math.abs(translateY)
+		if (Math.abs(translateY.value) > translateLimit.y) {
+			translateY.value *= translateLimit.y / Math.abs(translateY.value)
 		}
 	}
 }
 
 function calcTranslateLimit() {
-	if ('y' === getMarginDirection()) {
-		const imageToContainerRatio = containerWidth / aspectRatio / containerHeight
-		let translateLimitY = (scale * imageToContainerRatio - 1) / 2
-		if (0 > translateLimitY) {translateLimitY = 0}
-		return {
-			x: scale - 1, // Allow full movement to edges horizontally
-			y: translateLimitY * 2 // Allow full movement to edges vertically
-		}
-	}
-	const imageToContainerRatio = containerHeight * aspectRatio / containerWidth
-	let translateLimitX = (scale * imageToContainerRatio - 1) / 2
-	if (0 > translateLimitX) {translateLimitX = 0}
+	// When scale = 1, no panning needed (image fits in container)
+	// When scale > 1, we can pan to see parts of the image outside the viewport
+
+	// The image is scaled from center, so:
+	// - At scale 2, the image is 2x larger
+	// - The amount that extends beyond the container on EACH side is: (scale - 1) * containerSize / 2
+	// - In normalized coordinates (where 1.0 = full container), this is: (scale - 1) / 2
+
+	// Simple and correct approach:
+	// Max pan distance in normalized coords = (scale - 1) / 2
+	// This works for both X and Y directions regardless of aspect ratio
+
+	const basePanLimit = Math.max(0, (scale.value - 1) / 2)
+
 	return {
-		x: translateLimitX * 2, // Allow full movement to edges horizontally
-		y: scale - 1 // Allow full movement to edges vertically
+		x: basePanLimit,
+		y: basePanLimit,
 	}
 }
 
-function getMarginDirection() {
-	const containerRatio = containerWidth / containerHeight
-	return containerRatio > aspectRatio ? 'x' : 'y'
-}
-
 function onMouseWheel(ev: WheelEvent) {
-	if (!mouseWheelToZoom) {return}
+	if (!mouseWheelToZoom) { return }
 	ev.preventDefault()
 	const currTime = Date.now()
-	if (120 === Math.abs(ev.deltaY)) {
-		if (50 < currTime - lastFullWheelTime) {
+	if (Math.abs(ev.deltaY) === 120) {
+		if (currTime - lastFullWheelTime.value > 50) {
 			onMouseWheelDo(ev.deltaY)
-			lastFullWheelTime = currTime
+			lastFullWheelTime.value = currTime
 		}
 	} else {
-		if (50 < currTime - lastWheelTime) {
-			lastWheelDirection = ev.deltaX > ev.deltaY ? 'x' : 'y'
-			if ('y' === lastWheelDirection) {
+		if (currTime - lastWheelTime.value > 50) {
+			lastWheelDirection.value = ev.deltaX > ev.deltaY ? 'x' : 'y'
+			if (lastWheelDirection.value === 'y') {
 				onMouseWheelDo(ev.deltaY)
 			}
 		}
-		lastWheelTime = currTime
+		lastWheelTime.value = currTime
 	}
 }
 
 function onMouseWheelDo(wheelDelta: number) {
-	const scaleDelta = 1.25 ** (wheelDelta / 120)
+	// More responsive zoom speed
+	const scaleDelta = 1.15 ** (wheelDelta / 120)
 	tryToScale(scaleDelta)
 	onInteractionEnd()
 }
 
 function onMouseDown(ev: MouseEvent) {
 	refreshContainerPos()
-	isPointerDown = true
-	pointerPosX = ev.clientX
-	pointerPosY = ev.clientY
+	isPointerDown.value = true
+	pointerPosX.value = ev.clientX
+	pointerPosY.value = ev.clientY
+	lastMoveTime.value = Date.now()
+	velocityX.value = 0
+	velocityY.value = 0
+	if (momentumRaf.value) {
+		cancelAnimationFrame(momentumRaf.value)
+		momentumRaf.value = undefined
+	}
 	document.addEventListener('mousemove', onMouseMove)
 	document.addEventListener('mouseup', onMouseUp)
 }
 
 function onMouseUp() {
-	isPointerDown = false
+	isPointerDown.value = false
 	onInteractionEnd()
 	document.removeEventListener('mouseup', onMouseUp)
 	document.removeEventListener('mousemove', onMouseMove)
 }
 
 function onMouseMove(ev: MouseEvent) {
+	// Prevent swiper from handling mouse drag when panning zoomed image
+	if (!panLocked.value && scale.value > 1) {
+		ev.stopPropagation()
+	}
 	onPointerMove(ev.clientX, ev.clientY)
 }
 
 function onTouchStart(ev: TouchEvent) {
-	if (1 === ev.touches.length) {
+	if (ev.touches.length === 1) {
 		refreshContainerPos()
-		pointerPosX = ev.touches[0].clientX
-		pointerPosY = ev.touches[0].clientY
-		isPointerDown = true
-	} else if (2 === ev.touches.length) {
-		isPointerDown = true
-		pointerPosX = (ev.touches[0].clientX + ev.touches[1].clientX) / 2
-		pointerPosY = (ev.touches[0].clientY + ev.touches[1].clientY) / 2
+		pointerPosX.value = ev.touches[0].clientX
+		pointerPosY.value = ev.touches[0].clientY
+		lastMoveTime.value = Date.now()
+		velocityX.value = 0
+		velocityY.value = 0
+		if (momentumRaf.value) {
+			cancelAnimationFrame(momentumRaf.value)
+			momentumRaf.value = undefined
+		}
+		isPointerDown.value = true
+	} else if (ev.touches.length === 2) {
+		if (momentumRaf.value) {
+			cancelAnimationFrame(momentumRaf.value)
+			momentumRaf.value = undefined
+		}
+		velocityX.value = 0
+		velocityY.value = 0
+		isPointerDown.value = true
+		pointerPosX.value = (ev.touches[0].clientX + ev.touches[1].clientX) / 2
+		pointerPosY.value = (ev.touches[0].clientY + ev.touches[1].clientY) / 2
 		const distX = ev.touches[0].clientX - ev.touches[1].clientX
 		const distY = ev.touches[0].clientY - ev.touches[1].clientY
-		twoFingerInitDist = Math.sqrt(distX * distX + distY * distY)
+		twoFingerInitDist.value = Math.sqrt(distX * distX + distY * distY)
 	}
 	document.addEventListener('touchend', onTouchEnd)
 }
 
 function onTouchEnd(ev: TouchEvent) {
-	if (0 === ev.touches.length) {
-		isPointerDown = false
-		if (0.1 > Math.abs(scale - 1)) {scale = 1}
+	if (ev.touches.length === 0) {
+		isPointerDown.value = false
+		if (Math.abs(scale.value - 1) < 0.1) { scale.value = 1 }
 		onInteractionEnd()
-	} else if (1 === ev.touches.length) {
-		pointerPosX = ev.touches[0].clientX
-		pointerPosY = ev.touches[0].clientY
+	} else if (ev.touches.length === 1) {
+		pointerPosX.value = ev.touches[0].clientX
+		pointerPosY.value = ev.touches[0].clientY
 	}
 	document.removeEventListener('touchend', onTouchEnd)
 }
 
 function onTouchMove(ev: TouchEvent) {
-	if (1 === ev.touches.length) {
+	if (ev.touches.length === 1) {
+		// Prevent swiper from handling touch when panning zoomed image
+		if (!panLocked.value && scale.value > 1) {
+			ev.stopPropagation()
+		}
 		onPointerMove(ev.touches[0].clientX, ev.touches[0].clientY)
-	} else if (2
-
-		=== ev.touches.length) {
+	} else if (ev.touches.length === 2) {
+		// Always prevent default during pinch zoom
+		ev.stopPropagation()
 		const distX = ev.touches[0].clientX - ev.touches[1].clientX
 		const distY = ev.touches[0].clientY - ev.touches[1].clientY
 		const newTwoFingerDist = Math.sqrt(distX * distX + distY * distY)
-		tryToScale(newTwoFingerDist / twoFingerInitDist)
-		twoFingerInitDist = newTwoFingerDist
+		tryToScale(newTwoFingerDist / twoFingerInitDist.value)
+		twoFingerInitDist.value = newTwoFingerDist
 	}
 }
 
 function refreshContainerPos() {
-	if (zoomElement) {
-		const rect = zoomElement.getBoundingClientRect()
-		containerLeft = rect.left
-		containerTop = rect.top
+	if (zoomElement.value) {
+		const rect = zoomElement.value.getBoundingClientRect()
+		containerLeft.value = rect.left
+		containerTop.value = rect.top
 	}
 }
 
 function loop() {
-	animScale = gainOn(animScale, scale)
-	animTranslateX = gainOn(animTranslateX, translateX)
-	animTranslateY = gainOn(animTranslateY, translateY)
-	raf = window.requestAnimationFrame(loop)
+	animScale.value = gainOn(animScale.value, scale.value)
+	animTranslateX.value = gainOn(animTranslateX.value, translateX.value)
+	animTranslateY.value = gainOn(animTranslateY.value, translateY.value)
+	raf.value = window.requestAnimationFrame(loop)
 }
 
 function gainOn(from: number, to: number) {
-	const delta = (to - from) * 0.3
-	return 1e-5 < Math.abs(delta) ? from + delta : to
+	// Smoother easing with better responsiveness
+	const delta = (to - from) * 0.4
+	return Math.abs(delta) > 1e-5 ? from + delta : to
 }
 
 // Lifecycle hooks
 onMounted(() => {
-	tapDetector = new TapDetector()
-	if (zoomElement) {tapDetector.attach(zoomElement)}
+	tapDetector.value = new TapDetector()
+	if (zoomElement.value) { tapDetector.value.attach(zoomElement.value) }
 	if (doubleClickToZoom) {
-		tapDetector.onDoubleTap(onDoubleTap as any)
+		tapDetector.value.onDoubleTap(onDoubleTap as any)
+		// Also add native dblclick event for mouse
+		if (zoomElement.value) {
+			zoomElement.value.addEventListener('dblclick', onDoubleTap as any)
+		}
 	}
 	window.addEventListener('resize', onWindowResize)
 	onWindowResize()
@@ -314,28 +400,46 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-	if (zoomElement) {tapDetector?.detach(zoomElement)}
+	if (zoomElement.value) {
+		tapDetector.value?.detach(zoomElement.value)
+		if (doubleClickToZoom) {
+			zoomElement.value.removeEventListener('dblclick', onDoubleTap as any)
+		}
+	}
 	window.removeEventListener('resize', onWindowResize)
-	if (raf) {window.cancelAnimationFrame(raf)}
+	if (raf.value) { window.cancelAnimationFrame(raf.value) }
+	if (momentumRaf.value) { window.cancelAnimationFrame(momentumRaf.value) }
 })
 
 function onDoubleTap(ev: MouseEvent) {
-	if (1 === scale) {
-		if (0 < ev.clientX) {
-			pointerPosX = ev.clientX
-			pointerPosY = ev.clientY
-		}
-		tryToScale(Math.min(3, maxScale!))
+	// Update pointer position if available
+	if (ev.clientX > 0) {
+		pointerPosX.value = ev.clientX
+		pointerPosY.value = ev.clientY
+	}
+
+	// Calculate zoom levels
+	const mediumZoom = Math.min(2.5, maxScale / 2 + 0.5)
+	const highZoom = maxScale
+
+	// Cycle through three states: 1x -> medium -> max -> 1x
+	if (scale.value === 1) {
+		// From no zoom -> medium zoom
+		tryToScale(mediumZoom)
+	} else if (scale.value < highZoom - 0.1) {
+		// From medium zoom -> max zoom
+		tryToScale(highZoom / scale.value)
 	} else {
+		// From max zoom -> no zoom (reset)
 		reset()
 	}
 }
 
 function onWindowResize() {
-	if (zoomElement) {
-		const styles = window.getComputedStyle(zoomElement)
-		containerWidth = Number.parseFloat(styles.width)
-		containerHeight = Number.parseFloat(styles.height)
+	if (zoomElement.value) {
+		const styles = window.getComputedStyle(zoomElement.value)
+		containerWidth.value = Number.parseFloat(styles.width)
+		containerHeight.value = Number.parseFloat(styles.height)
 		setPointerPosCenter()
 		limit()
 	}
@@ -344,16 +448,9 @@ function onWindowResize() {
 
 <template>
 	<div
-		ref="zoomElement"
-		class="vue-zoomer"
-		:style="{ backgroundColor }"
-		@mousewheel="onMouseWheel"
-		@DOMMouseScroll="onMouseWheel"
-		@mousedown="onMouseDown"
-		@mouseout="setPointerPosCenter"
-		@focusout="setPointerPosCenter"
-		@touchstart="onTouchStart"
-		@touchmove="onTouchMove"
+		ref="zoomElement" class="vue-zoomer" :style="{ backgroundColor }" @mousewheel="onMouseWheel"
+		@DOMMouseScroll="onMouseWheel" @mousedown="onMouseDown" @mouseout="setPointerPosCenter"
+		@focusout="setPointerPosCenter" @touchstart="onTouchStart" @touchmove="onTouchMove"
 	>
 		<div class="zoomer" :style="wrapperStyle">
 			<slot />
@@ -371,24 +468,27 @@ function onWindowResize() {
 	z-index: 1000;
 	height: 100px
 }
+
 .vue-zoomer {
-  overflow: hidden;
+	overflow: hidden;
 }
+
 .zoomer {
-  transform-origin: 50% 50%;
-  width: 100%;
-  height: 100%;
-  max-width: 100vw;
-  max-height: 100vh;
+	transform-origin: 50% 50%;
+	width: 100%;
+	height: 100%;
+	max-width: 100vw;
+	max-height: 100vh;
 }
-.zoomer > img {
-  vertical-align: top;
-  user-select: none;
-  -moz-user-drag: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-drag: none;
-  -moz-user-drag: none;
+
+.zoomer>img {
+	vertical-align: top;
+	user-select: none;
+	-moz-user-drag: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-webkit-user-drag: none;
+	-moz-user-drag: none;
 }
 </style>