57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
|
|
||
|
|
|
||
|
|
export default class{
|
||
|
|
static bindAllCardDragAndDropEvents(){
|
||
|
|
var cards = document.getElementsByClassName("card")
|
||
|
|
for (let i = 0; i < cards.length; i++) {
|
||
|
|
cards[i].addEventListener("dragstart", this.onDragStart);
|
||
|
|
var card = cards[i] as HTMLElement
|
||
|
|
card.draggable = true
|
||
|
|
}
|
||
|
|
var cardLists = document.getElementsByClassName("card-list")
|
||
|
|
for (let i = 0; i < cardLists.length; i++) {
|
||
|
|
cardLists[i].addEventListener("drop", this.onDrop)
|
||
|
|
cardLists[i].addEventListener("dragover", this.allowDrop)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
static bindSpecificCardDragAndDropEvents(card){
|
||
|
|
card.addEventListener("dragstart", this.onDragStart)
|
||
|
|
}
|
||
|
|
static onDragStart(event) {
|
||
|
|
event.dataTransfer.clearData();
|
||
|
|
event.dataTransfer.setData("text/plain", event.target.id)
|
||
|
|
}
|
||
|
|
static allowDrop(event) {
|
||
|
|
event.preventDefault()
|
||
|
|
}
|
||
|
|
static onDrop(event) {
|
||
|
|
const data = event.dataTransfer.getData("text")
|
||
|
|
event.preventDefault()
|
||
|
|
const cardlist = event.target.closest(".card-list")
|
||
|
|
const card = document.getElementById(data)
|
||
|
|
const origin_columnId = card.closest(".column").id
|
||
|
|
const target_columnId = cardlist.closest(".column").id
|
||
|
|
const cardId = card.getAttribute("db_id");
|
||
|
|
if(target_columnId == origin_columnId){
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const xhttp = new XMLHttpRequest()
|
||
|
|
const xhttp2 = new XMLHttpRequest()
|
||
|
|
if(target_columnId == "-2"){
|
||
|
|
xhttp2.open("GET", `${location.origin}/kanban/api/card/set/done/${cardId}/true`, true)
|
||
|
|
xhttp2.send()
|
||
|
|
} else if(origin_columnId == "-2"){
|
||
|
|
xhttp2.open("GET", `${location.origin}/kanban/api/card/set/done/${cardId}/false`, true)
|
||
|
|
xhttp2.send()
|
||
|
|
}
|
||
|
|
|
||
|
|
xhttp.open("GET", `${location.origin}/kanban/api/card/move/${cardId}/${target_columnId}`, true)
|
||
|
|
xhttp.onreadystatechange = (ev) => {
|
||
|
|
if (xhttp.readyState !== XMLHttpRequest.DONE || xhttp.status !== 200){
|
||
|
|
return
|
||
|
|
}
|
||
|
|
cardlist.appendChild(card)
|
||
|
|
}
|
||
|
|
xhttp.send()
|
||
|
|
}
|
||
|
|
}
|