Drag drop beberapa tujuan - mencoba efisiensi javascript

Mencoba mengefisienkan drag drop beberapa tujuan. 

Saya menggunakan array.

seperti ini :

var arbox = [];

for(var i=0;i<=5;i++){

arbox.push([arDrop[i], xydrop[i][0], xydrop[i][1], [] ]);

}

jadi si arDrop itu adalah tujuannya. 

xydrop adalah nilai x dan y si arDrop

dan [] terakhir di isi dengan btn yang masuk. 

kemudian ketika memasukkan btn ke drop saya gunakan ini :

if(el.ff){

arbox[el.j][3].push(el);

if(arbox[el.j][3].length==2){

var btnBack = arbox[el.j][3][0];

arbox[el.j][3].splice(0, 1);

btnBack.style.left = ""+ btnBack.x0 + "px";

btnBack.style.top = ""+ btnBack.y0 + "px";

btnBack.j = -1;

}

arbox[el.j][3][0].style.left = ""+arbox[el.j][1] + "px";

arbox[el.j][3][0].style.top = ""+arbox[el.j][2] + "px";

CekDrop();

}

jadi, ada kemungkinan 2 buah btn dalam 1 buah drop. sehingga perlu di geser yang pertama ke posisi x0 y0 nya dan baru memasukkan btn aktif ke drop.

saya gunakan splice, ambil di posisi array pertama setelah push array. Jadi si array isinya tetap satu btn.

abort addEventListener tombol dengan javascript

Ketika ingin menghilangkan fungsi yang menempel di tombol, ternyata bisa menggunakan abort. Masukkan signal: controller.signal di dalan addEventListener.

Begini caranya :

const controller = new AbortController();

mybtn.addEventListener('mousedown', dragMouseDown,{ signal: controller.signal });

mybtn.addEventListener('touchstart', dragMouseDown, { signal: controller.signal } ,{ passive: false });

Cara memanggilnya

controller.abort();

setelah dipanggil, seperti removeEventListener, yaitu menghilangkan addEventListener.

innerHTML yang bisa di edit

Ketika sedang menbuat interaktif, muncul pertanyaan, apakah innerHTML bisa di edit sebagai inputan?

Googling lah. Ternyata bisa. 

Caranya :

document.getElementById("myDiv").contentEditable = "true"; << bisa edit teks di div sebagai inputan

document.getElementById("myDiv").contentEditable = "false"; << menonaktifkan edit

bisa juga di taruh ketika membuat div

<div class="textbox" id="textbox" contenteditable="true"></div>

Ternyata penulisan ketika di Javascript dan di HTML berbeda di huruf "e" saja. editable dan Editable. Sempet salah tadi, kirain sama kecil semua, ternyata tidak.