Как узнать, какой элемент я перетаскиваю - PullRequest
Новая
       1

Как узнать, какой элемент я перетаскиваю

0 голосов
/ 17 мая 2019

Я делаю приложение перетаскивания с ванильным Javascript. Так что, имея только 1 перетаскиваемый элемент, он работает хорошо, но когда у меня их больше одного, они фактически не перетаскивают, а только один из них.

Мне нужно различать эти элементы, чтобы знать, какой из них я сейчас перемещаю, но я не могу найти какое-либо решение.
Я провел небольшое исследование и попытался использовать атрибут ondrag, но из этого ничего не могу сделать. Это мой код: 

const filled = document.querySelectorAll('.fill');
const empties = document.querySelectorAll('.empty');

//fill listeners
for (const fill of filled){
fill.addEventListener('dragstart', dragStart);
fill.addEventListener('dragend', dragEnd);
}

for(const empty of empties)
{
    empty.addEventListener('dragover', dragOver);
    empty.addEventListener('dragenter', dragEnter);
    empty.addEventListener('dragleave', dragLeave);
    empty.addEventListener('drop', dragDrop);
}


var element_id = "";

//drag functions
function dragStart(){
    this.className += ' hold';
    setTimeout(() => this.className = 'invisible', 0);
}

function dragEnd(){
    this.className = 'fill';
}

function dragOver(e){
    e.preventDefault();
}

function dragEnter(e){
    e.preventDefault();
    this.className += ' hovered';
}

function dragLeave(){
    this.className = 'empty';
}

function dragDrop(){
    document.GetElementById(id).className = 'empty';
    this.append(element_id)
}
function _(id){
    element_id = id;
}
body {
    background: darkcyan;
}

.fill {
    background-image: url('https://source.unsplash.com/random/50x50');
    position: relative;
    height: 50px;
    width: 50px;
    top: 2px;
    left: 2px;
    cursor: pointer; 
}
.holders{
    display: inline-block;
    height: 55px;
    width: 55px;
    margin: 10px;
    border: 3px gold solid;
    background: pink;
    position: relative;
}

.empty{
    display: inline-block;
    height: 55px;
    width: 55px;
    margin: 5;
    border: 3px black solid;
    background: grey;
    position: relative;
    top: 80px;
    left: 50px;
}

.hold{
    border: solid lightgrey 4px;
}
.hovered{
    background: white;
    border-style: dashed;
}
.invisible{
    display: none;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>DragnDrop</title>
</head>
<body>

    <div class="holders">
        <div id="0" ondrag="_(id)" class="fill" draggable="true"></div>
    </div>
    <div class="holders">
        <div id="1" class="fill" draggable="true"></div>
    </div>
    <div class="holders">
        <div id="2" class="fill" draggable="true"></div>
    </div>
    <div class="holders">
        <div id="3" class="fill" draggable="true"></div>
    </div>
    <br>
    <div value="0" class="empty"></div>
    <div value="0" class="empty"></div>

<script src="js/main.js"></script>
</body>
</html>

Я не очень разбираюсь в javascript, поэтому буду признателен за любые объяснения. Спасибо.

Ответы [ 2 ]

0 голосов
/ 17 мая 2019

Попробуйте сейчас 

const filled = document.querySelectorAll('.fill');
const empties = document.querySelectorAll('.empty');

//fill listeners
for (const fill of filled){
fill.addEventListener('dragstart', dragStart);
fill.addEventListener('dragend', dragEnd);
}

for(const empty of empties)
{
    empty.addEventListener('dragover', dragOver);
    empty.addEventListener('dragenter', dragEnter);
    empty.addEventListener('dragleave', dragLeave);
    empty.addEventListener('drop', dragDrop);
}


var element_id = "";

//drag functions
function dragStart(){
    console.log(this.id);
    this.className += ' hold';
    setTimeout(() => this.className = 'invisible', 0);
}

function dragEnd(){
    this.className = 'fill';
}

function dragOver(e){
    e.preventDefault();
}

function dragEnter(e){
    e.preventDefault();
    this.className += ' hovered';
}

function dragLeave(){
    this.className = 'empty';
}

function dragDrop(){
    console.log(this.id);
    //document.getElementById(this.id).className = 'empty';
    //this.append(element_id)
}
body {
    background: darkcyan;
}

.fill {
    background-image: url('https://source.unsplash.com/random/50x50');
    position: relative;
    height: 50px;
    width: 50px;
    top: 2px;
    left: 2px;
    cursor: pointer; 
}
.holders{
    display: inline-block;
    height: 55px;
    width: 55px;
    margin: 10px;
    border: 3px gold solid;
    background: pink;
    position: relative;
}

.empty{
    display: inline-block;
    height: 55px;
    width: 55px;
    margin: 5;
    border: 3px black solid;
    background: grey;
    position: relative;
    top: 80px;
    left: 50px;
}

.hold{
    border: solid lightgrey 4px;
}
.hovered{
    background: white;
    border-style: dashed;
}
.invisible{
    display: none;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>DragnDrop</title>
</head>
<body>

    <div class="holders">
        <div id="0" class="fill" draggable="true"></div>
    </div>
    <div class="holders">
        <div id="1" class="fill" draggable="true"></div>
    </div>
    <div class="holders">
        <div id="2" class="fill" draggable="true"></div>
    </div>
    <div class="holders">
        <div id="3" class="fill" draggable="true"></div>
    </div>
    <br>
    <div value="0" class="empty"></div>
    <div value="0" class="empty"></div>

<script src="js/main.js"></script>
</body>
</html>
0 голосов
/ 17 мая 2019

Сначала вам нужно понять, как работает addEventListener .

addEventListener: методдоступно с элементом DOM, который используется для подключения обработчиков событий с этим элементом DOM.Он принимает два параметра: первый - это имя-события, а второй - функция-обработчик / обратный вызов, который получает вызов всякий раз, когда происходит это событие относительно этого элемента DOM.

Second Parameter / handler-function / callback: определение этой функции-обработчика принимает один параметр как событие .

В вашем случае для обработчика событий dragDop вы можете указать function dragDrop как: 

const empties = document.querySelectorAll('.empty');
for(const empty of empties)
{
   empty.addEventListener('drop', dragDrop);
}

function dragDrop(event){
   //your code
}

event: этот параметр для функции-обработчика является объектом, который имеетtarget как атрибут, который содержит элемент DOM, который генерирует это событие как значение.Таким образом, внутри вашего обработчика вы можете получить доступ к интересующему вас элементу: event.target

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...