checkers drag and drop

[JackH-GA]

What's the problem you're trying to solve?

dropping the game pieces (child elements) into a different div(square) after dragging the piece

Post any code you think might be relevant (one fenced block per file)

const allSquares = document.getElementsByClassName("square")

const p2Pieces = document.getElementsByClassName("p2Piece")

const p1Pieces = document.getElementsByClassName("p1Piece")

function drag() {
    allSquares.forEach(square => { 
        square.addEventListener('dragpiecestart', dragPieceStart)
    })
}

function dragPieceStart(e) {
    startPieceId = e.target.getAttribute('square-id')
    dragElement = e.target
    console.log(e)
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

im trying to target the id of the squares as the new location for the child element (p1/p2 piece) however, i cant figure out how to write the function that will allow this to happen

What is your best guess as to the source of the problem?

my best guess is that i hard coded the html because I was not sure how to render the gameboard through javascript, and now I am having trouble calling the individual html elements

What things have you already tried to solve the problem?

i tried targeting the .target for the id of a div square to be able to drop the child element into the new square's id

Paste a link to your repository here

https://github.com/JackH-GA/Unit-1-project-Checkers

[nayaba]

Can you push your most recent code up to github?

[timmshinbone]

I think the issue here is with this line:

square.addEventListener('dragpiecestart', dragPieceStart)

the first argument of addEventListener is always some kind of event, and those are pre-coded/built in to js. So, your event listener doesn't know what dragpiecestart means, it only knows the built in drag events, read more about those here