Drag & drop par les scrolls plutot que de bouger le DOM?

[Xenos]

C'est ce que j'allais dire ^^
Je suis en train de creuser cette direction... parce que les mousedown/up/mouse, sur tactile c'est risqué, et tu risques d'avoir des emmerdes type <a> non cliquables à la souris, textes non sélectionnables à la souris, etc. Si je trouve, je vous dis.

---

<div style="height:400px;width:400px;overflowcroll;" draggable="true" id="qzdqzdqzd">

	<div style="height:900px; width:40px;">

		<a href="http://127.0.0.1/">un lien</a>

	</div>

	<span style="width:800px;display:inline-block;">Une span</span>

	<a href="http://127.0.0.1/">un autre lien</a>

</div>

<script>

	var div = document.getElementById('qzdqzdqzd');

	div.style.border = '1px solid red';

	

	var startX, startY, scrollX, scrollY;

	function startDrag(evt) {

		console.log('dragStart', evt);

		startX = evt.clientX;

		startY = evt.clientY;

		scrollX = div.scrollLeft;

		scrollY = div.scrollTop;

		if (!evt.dataTransfer.getData('text/plain')) {	// No drag drop if data already set (user is drag and dropping a DOM item)

			evt.dataTransfer.setData('text/x-coords', '<<NoData>>');

			evt.dataTransfer.setDragImage(document.createElement('img'), 0, 0);

		}

	}

	

	function moveDrag(evt) {

		evt.preventDefault();

		if (evt.dataTransfer.getData('text/x-coords')) {

			div.scrollTop = scrollY + evt.clientY - startY;

			div.scrollLeft = scrollX + evt.clientX - startX;

			return true;

		}

		return false;

	}

	

	var dragOk = false;

	function stopDrag(evt) {

		console.log('dragStop', evt);

		evt.preventDefault();

		dragOk = true;

		console.log(evt.dataTransfer);

		var matches = evt.dataTransfer.getData('text/plain').match(/^(\d+);(\d+)$/);	// ie: 50;50

		if (matches) {

			div.scrollTop = parseInt(matches[0]);

			div.scrollLeft = parseInt(matches[1]);

			return false;

		}

		else if (evt.dataTransfer.getData('text/plain+x-coords')) {

			moveDrag();

		}

		return false;

	}

	

	function dragEnd(evt) {

		if (!dragOk) {

			div.scrollLeft = scrollX;

			div.scrollTop = scrollY;

		}

		dragOk = false;

	}

	

	div.addEventListener('dragstart', startDrag);

	div.addEventListener('dragover', moveDrag);

	div.addEventListener('drop', stopDrag);

	div.addEventListener('dragend', dragEnd);

</script>

Faudrait voir pour la sélection de texte, mais tu peux encore cliquer les liens ou les drag & dropper. Tu peux même drag & drop des coordonnées dans la div, genre XX;YY