Nu functioneaza Drag-Drop la Tabla noua in ChessBoard JS

[andras]

Salut,
Am o pagina in care se creaza o tabla de sah cu ChessBoard JS, cu functia aceasta (simplificat):

Cod: Selectaţi tot

<script type="text/javascript">
function afiseazasetare(){            // afiseaza tabla pentru setare pozitie
var board ='';
board = ChessBoard('board', {
  draggable: true,
  dropOffBoard: 'trash',
  sparePieces: true
});
$('#okBtn').on('click', punefen);
function punefen(){
   var fenpozitie = board.fen();
   document.getElementById('fenset').value = fenpozitie;
}
}
</script>

si in HTML am :

Cod: Selectaţi tot

<td><a href="#" onclick="afiseazasetare();" >New position</a></td>

Aici variabila board (proprietatea draggable) functioneaza corect numai la primul click pe New position, la al doilea click nu mai functioneaza normal. Nu cred ca este de la clasa ChessBoard, cred ca eu gresesc undeva in HTML sau JS pentru ca dupa primul click pe New position trebuie sa reincarc pagina ca sa pot face al doilea click.

Codul anterior pare corect, problema poate fi in alta parte in codul JS, sau logica lui; depinde cum se modifica DOM-ul (structura html prin js).
Doar din acel cod nu se poate gasi cauza. Daca poti, da adresa paginii sau codul /sursa html /js.

Da, aplicatia (inca nu e gata, mai lucrez la ea) se afla pe serverul developer:
superbit.ro:1002/strategy/index.php

optiunea (din meniu orizontal) Courses-> login (stii deja username si parola de administrator)-> New position-> apare tabla, se introduc 2-3 piese cu drag&drop, apoi la o noua apasare pe New position si la o noua incercare de drag&drop piesa ramine agatata de cursor, nu se mai face drop.

Problema e la DOM, structura codului html in memoria JS. Fiecare patratica si piesa au cate un id unic, la apasare New Position tabla se reinitializeaza si se schimba acele id-uri. Elementul #board ramane fix, dar cele din el se schimba si probabil se pierde relatia inregistrata in memorie intre #board si ce e in el, de aceea nu se mai face Drop.
Iar la incercarea de drag-drop care nu merge apare eroare in consola: "TypeError: s is undefined chessboard.js:1037".
Nu stiu daca e vreun "bug" al scriptului sau mai trebuie facut ceva.

Multumesc pentru clarificari, voi mai studia problema. Daca nu rezolv, varianta (care nu-mi place) ar fi sa-l restrictionez pe utilizator si sa-l oblig ca odata ce a optat pentru New position sa mearga pana la capat sau sa renunte.

Cred ca functioneaza daca inainte de a reseta tabla si piesele se reinitializeaza elementul #board, ca sa se stearg din memoria alocata lui inregisrrarile cu elementele /id-urile anterioare din el.
Incearca asa:

Cod: Selectaţi tot

<script>
var board = {};
function afiseazasetare(){  // afiseaza tabla pentru setare pozitie
  document.getElementById('board').outerHTML ='<div id="board"></div>';  //reinitializeaza #board

  //reseteaza tabla
  board = ChessBoard('board', {
    draggable: true,
    dropOffBoard: 'trash',
    sparePieces: true
  });

  document.getElementById('okBtn').addEventListener('click', function(){ document.getElementById('fenset').value = board.fen();});
} 		
</script>

Intr-adevar, functioneaza. Asta era, nu stiam cum sa eliberez din memorie variabila #board. Am mai intilnit astfel de situatii, acum e clar cum trebuie procedat. Multumesc mult!