Question

我正在使用香草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不太熟悉，因此不胜感激。谢谢。

Answer 1

首先，您需要了解 addEventListener 的工作原理。

addEventListener ：是DOM元素提供的一种方法，用于将事件处理程序与该DOM元素相连接。它有两个参数，第一个是事件名称，第二个是处理程序功能/回调，当该事件针对该DOM元素发生时，该函数将被调用。

Second Parameter / handler-function / callback ：此处理函数的定义接受一个参数作为 event 。

>

对于dragDop事件处理程序，您可以将function dragDrop指定为：

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

function dragDrop(event){
   //your code
}

event ：处理程序函数的此参数是一个对象，该对象具有作为属性的目标，其中包含将此事件作为值发出的DOM元素。因此，您可以在处理程序内部以以下方式访问您感兴趣的元素： event.target

Answer 2

立即尝试

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>

如何知道我要拖动哪个元素

2 个答案: