dmitry-kurmanov/touch dnd

## touch dnd
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Drag Drop Touch Example</title>

  <style>
    .top, .bottom {
      width: 100%;
      height: 200px;
      font-size: 25px;
    }

    .top {
      background-color: tomato;
    }

    .bottom {
      background-color: orange;
    }

    .item {
      height: 200px;
      width: 200px;
      background-color: palegreen;
      margin: 50px;
      font-size: 100px;
      border: 3px solid burlywood;
      box-sizing: border-box;
    }

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  </style>
</head>

<body>
  <div class="top">
    scrollable zone
  </div>
  <div class="list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <div class="bottom">
    scrollable zone
  </div>
</body>

<script>
  let preventScrolling = false;

  // WebKit requires cancelable `touchmove` events to be added as early as possible
  window.addEventListener(
    'touchmove',
    (event) => {
      if (!preventScrolling) {
        return;
      }

      // Prevent scrolling
      event.preventDefault();
    },
    {passive: false},
  );

  const onTouchStart = (e)=>{
    if (!e.target.classList.contains("item")) return;
    preventScrolling = true;
  };
  const onTouchMove = (e)=> {
  };

  const onTouchEnd = (e)=> {
    preventScrolling = false;
  };

  document.addEventListener('touchstart', onTouchStart);
  document.addEventListener('touchmove', onTouchMove);
  document.addEventListener('touchend', onTouchEnd);
</script>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Drag Drop Touch Example</title>

	<style>
	.top, .bottom {
	width: 100%;
	height: 200px;
	font-size: 25px;
	}

	.top {
	background-color: tomato;
	}

	.bottom {
	background-color: orange;
	}

	.item {
	height: 200px;
	width: 200px;
	background-color: palegreen;
	margin: 50px;
	font-size: 100px;
	border: 3px solid burlywood;
	box-sizing: border-box;
	}

	div {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	}
	</style>
	</head>

	<body>
	<div class="top">
	scrollable zone
	</div>
	<div class="list">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	</div>
	<div class="bottom">
	scrollable zone
	</div>
	</body>

	<script>
	let preventScrolling = false;

	// WebKit requires cancelable `touchmove` events to be added as early as possible
	window.addEventListener(
	'touchmove',
	(event) => {
	if (!preventScrolling) {
	return;
	}

	// Prevent scrolling
	event.preventDefault();
	},
	{passive: false},
	);

	const onTouchStart = (e)=>{
	if (!e.target.classList.contains("item")) return;
	preventScrolling = true;
	};
	const onTouchMove = (e)=> {
	};

	const onTouchEnd = (e)=> {
	preventScrolling = false;
	};

	document.addEventListener('touchstart', onTouchStart);
	document.addEventListener('touchmove', onTouchMove);
	document.addEventListener('touchend', onTouchEnd);
	</script>

	</html>