Как сделать, чтобы событие перетаскивания срабатывало на указанном элементе
238
03 мая 2022, 02:40
Вот код:
function $(el) {
return document.querySelector(el);
}
function ODS(e) {
e.dataTransfer.setData("text/plain", event.target.id)
e.currentTarget.style.opacity = "0.2";
}
function ODO(e) {
e.preventDefault();
}
function OD(e) {
const id = e.dataTransfer.getData("text");
const drag = $("#" + id);
const dropzone = $("#elem_container" + e.target.id[e.target.id.length - 1]);
drag.style.opacity = "1";
dropzone.appendChild(drag);
e.dataTransfer.clearData();
}
width = window.innerWidth;
$("#box1").style.left = width / 45 - $("#box1").style.width + "px"
$("#box2").style.left = width / 2.75 - $("#box2").style.width + "px"
$("#box3").style.left = width / 1.42 - $("#box3").style.width + "px"body {
background-color: #4b4;
margin: 0;
padding: 0;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.box {
width: 350px;
margin: 5em auto;
padding-left: 10px;
padding-right: 10px;
background-color: #eee;
border-radius: 0.5em;
box-shadow: 2px 3px 7px 2px rgba(0, 0, 0, 0.02);
float: left;
position: absolute;
top: -60px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bold_text {
font-weight: bold;
}
.element {
background-color: #fff;
cursor: pointer;
box-shadow: 0 4px 9px #ccc;
padding-top: 0.1px;
padding-bottom: 0.1px;
border-radius: 10px;
margin-top: 6px;
}
.element:hover {
background-color: #f6f6f6;
}
.element_text {
padding-left: 10px;
}
.create {
font-weight: 200;
cursor: pointer;
}
.create:hover {
background-color: #ddd;
border-radius: 5px;
padding-top: 2px;
padding-bottom: 2px;
}<body>
<div id="content">
<div id="box1" class="box" ondragover="ODO(event)" ondrop="OD(event)">
<p class="bold_text"> 1</p>
<div id="elem_container1">
<div class="element" id="element1" draggable="true" ondragstart="ODS(event)" onclick="this.remove()">
<p class="element_text">1</p>
</div>
<div class="element" id="element2" draggable="true" ondragstart="ODS(event)" onclick="this.remove()">
<p class="element_text">2</p>
</div>
</div>
</div>
<div id="box2" class="box" ondragover="ODO(event)" ondrop="OD(event)">
<p class="bold_text"> 2</p>
<div id="elem_container2"></div>
</div>
<div id="box3" class="box" ondragover="ODO(event)" ondrop="OD(event)">
<p class="bold_text"> 3</p>
<div id="elem_container3"></div>
</div>
</div>
</body>Мне нужно сделать так, чтобы при перетаскивании элемента не надо было пытаться попасть в elem_container, а можно было просто перетащить элемент в boxN
Я пытался задать id каждому элементу внутри, но это очень долго
Можно как-то сделать, чтобы если ты отпускал элемент на div boxN, то чтобы оно не смотрело на каком элементе в div ты отпустил ЛКМ, а чтобы всё было так, будто ты отпустил элемент на div
То есть например:
<div id="box1">
<p class="text">1</p>
<div id="elem_container1">
</div>
Если ты отпустишь элемент на <p class="text>, то чтобы всё было так, будто ты отпустил перетаскиваемый элемент на <div id="box1">, или на <div id="elem_container1>
Вот весь код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO List</title>
<style type="text/css">
body {
background-color: #4b4;
margin: 0;
padding: 0;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.box {
width: 350px;
margin: 5em auto;
padding-left: 10px;
padding-right: 10px;
background-color: #eee;
border-radius: 0.5em;
box-shadow: 2px 3px 7px 2px rgba(0, 0, 0, 0.02);
float: left;
position: absolute;
top: -60px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bold_text {
font-weight: bold;
}
.element {
background-color: #fff;
cursor: pointer;
box-shadow: 0 4px 9px #ccc;
padding-top: 0.1px;
padding-bottom: 0.1px;
border-radius: 10px;
margin-top: 6px;
}
.element:hover {
background-color: #f6f6f6;
}
.element_text {
padding-left: 10px;
}
.create {
font-weight: 200;
cursor: pointer;
}
.create:hover {
background-color: #ddd;
border-radius: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
</style>
</head>
<body>
<div id="content">
<div id="box1" class="box" ondragover="ODO(event)" ondrop="OD(event)">
<p id="bold_text1" class="bold_text"> Нужно сделать</p>
<div id="elem_container1">
<div class="element" id="element1" draggable="true" ondragstart="ODS(event)" onclick="this.remove()">
<p class="element_text">Тест</p>
</div>
<div class="element" id="element2" draggable="true" ondragstart="ODS(event)" onclick="this.remove()">
<p class="element_text">Тест2</p>
</div>
</div>
<p id="create1" class="create"> + Добавить</p>
</div>
<div id="box2" class="box" ondragover="ODO(event)" ondrop="OD(event)">
<p id="bold_text2" class="bold_text"> В процессе</p>
<div id="elem_container2"></div>
<p id="create2" class="create"> + Добавить</p>
</div>
<div id="box3" class="box" ondragover="ODO(event)" ondrop="OD(event)">
<p id="bold_text3" class="bold_text"> Готово</p>
<div id="elem_container3"></div>
<p id="create3" class="create"> + Добавить</p>
</div>
<script>
function $(el) {
return document.querySelector(el);
}
function ODS(e) {
e.dataTransfer.setData("text/plain", event.target.id)
e.currentTarget.style.opacity = "0.2";
}
function ODO(e) {
e.preventDefault();
}
function OD(e) {
const id = e.dataTransfer.getData("text");
const drag = $("#" + id);
const dropzone = $("#elem_container" + e.target.id[e.target.id.length - 1]);
drag.style.opacity = "1";
dropzone.appendChild(drag);
e.dataTransfer.clearData();
}
width = window.innerWidth;
$("#box1").style.left = width / 45 - $("#box1").style.width + "px"
$("#box2").style.left = width / 2.75 - $("#box2").style.width + "px"
$("#box3").style.left = width / 1.42 - $("#box3").style.width + "px"
</script>
</div>
</body>
</html>
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47554 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30492 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23626 visits
- Как через css изменить цвет png изображения? 10347 visits
- Blob video url download 9956 visits
- Php curl запрос через прокси с авторизацией 9206 visits
- Работа с captcha vk api 8088 visits
© "hostciti.net" 19.11.2024 | 00:43