Телеграмм чат группы js

Какая то аномальная ошибка у меня появилась помогите. Есть один html файл в нем и css и js я с начала писал код в теге body когда закончил решил добавить Doctype и скрипт начал не работать. Удаляю Doctype все нормально работает

Можно код ?

источник

23:27пожаловаться #5

VV

Varuj Varuj in JavaScript — русскоговорящее сообщество

ꀘꂦꌗ꓄ꍟꈤ

Можно код ?

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<style>
html,
body,
.container {
width: 100%;
height: 100%;
}

* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.fon {
width: 70%;
height: auto;
}
.wrapper {
width: 95%;
height: 95%;
display: flex;
align-items: center;
justify-content: center;
}
.icons {
width: 160px;
height: auto;
}
.icon {
display: block;
width: 120px;
height: auto;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="icons">
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
class="icon"
draggable="false"
/>
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
class="icon"
draggable="false"
/>
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
class="icon"
draggable="false"
/>
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
class="icon"
draggable="false"
/>
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
class="icon"
draggable="false"
/>
</div>
<img src="fon.jpg" class="fon" draggable="false" />
<div class="icons">
<img src="00.jpg" class="icon" draggable="false" />
<img src="001.jpg" class="icon" draggable="false" />
<img src="002.jpg" class="icon" draggable="false" />
<img src="00.jpg" class="icon" draggable="false" />
<img src="001.jpg" class="icon" draggable="false" />
</div>
</div>
</div>

<script>
let draggableElements = document.getElementsByClassName('icon')
let body = document.querySelector('body')
let dragEl

const onMouseMove = (e) => {
if (
dragEl &&
body.offsetWidth - dragEl.offsetWidth / 2 > e.pageX &&
body.offsetHeight - dragEl.offsetHeight / 2 > e.pageY
) {
console.log(e.pageX, body.offsetWidth)
dragEl.style.position = 'absolute'
dragEl.style.left = e.pageX - dragEl.offsetWidth / 2
dragEl.style.top = e.pageY - dragEl.offsetHeight / 2
}
}
for (let i = 0; i < draggableElements.length; i++) {
const mousedown = (event) => {
dragEl = event.target
}
const mouseup = (event) => {
dragEl = null
}
draggableElements[i].addEventListener('mousedown', mousedown)
draggableElements[i].addEventListener('mouseup', mouseup)
//Listeners for phone
draggableElements[i].addEventListener('touchstart', mousedown)
draggableElements[i].addEventListener('touchend', mouseup)
}
document.addEventListener('mousemove', onMouseMove)
document.addEventListener('touchmove', onMouseMove)
</script>
</body>
</html>

источник

23:31пожаловаться #6

mm

mopsiq mopsiq in JavaScript — русскоговорящее сообщество

https://codepen.io/

источник

23:32пожаловаться #7

ꀘ

ꀘꂦꌗ꓄ꍟꈤ in JavaScript — русскоговорящее сообщество

Varuj Varuj

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<style>
html,
body,
.container {
width: 100%;
height: 100%;
}

* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.fon {
width: 70%;
height: auto;
}
.wrapper {
width: 95%;
height: 95%;
display: flex;
align-items: center;
justify-content: center;
}
.icons {
width: 160px;
height: auto;
}
.icon {
display: block;
width: 120px;
height: auto;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="icons">
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
class="icon"
draggable="false"
/>
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
class="icon"
draggable="false"
/>
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
class="icon"
draggable="false"
/>
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
class="icon"
draggable="false"
/>
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
class="icon"
draggable="false"
/>
</div>
<img src="fon.jpg" class="fon" draggable="false" />
<div class="icons">
<img src="00.jpg" class="icon" draggable="false" />
<img src="001.jpg" class="icon" draggable="false" />
<img src="002.jpg" class="icon" draggable="false" />
<img src="00.jpg" class="icon" draggable="false" />
<img src="001.jpg" class="icon" draggable="false" />
</div>
</div>
</div>

<script>
let draggableElements = document.getElementsByClassName('icon')
let body = document.querySelector('body')
let dragEl

const onMouseMove = (e) => {
if (
dragEl &&
body.offsetWidth - dragEl.offsetWidth / 2 > e.pageX &&
body.offsetHeight - dragEl.offsetHeight / 2 > e.pageY
) {
console.log(e.pageX, body.offsetWidth)
dragEl.style.position = 'absolute'
dragEl.style.left = e.pageX - dragEl.offsetWidth / 2
dragEl.style.top = e.pageY - dragEl.offsetHeight / 2
}
}
for (let i = 0; i < draggableElements.length; i++) {
const mousedown = (event) => {
dragEl = event.target
}
const mouseup = (event) => {
dragEl = null
}
draggableElements[i].addEventListener('mousedown', mousedown)
draggableElements[i].addEventListener('mouseup', mouseup)
//Listeners for phone
draggableElements[i].addEventListener('touchstart', mousedown)
draggableElements[i].addEventListener('touchend', mouseup)
}
document.addEventListener('mousemove', onMouseMove)
document.addEventListener('touchmove', onMouseMove)
</script>
</body>
</html>

СКРИН

источник

23:33пожаловаться #8

VV

Varuj Varuj in JavaScript — русскоговорящее сообщество