일반 자바 스크립트를 사용하여 그리드의 상자 안에 십자 기호를 끌어서 놓으시겠습니까?

JSFiddle 작동 : http://jsfiddle.net/wz4hs9qa/2/

다음은 코드 변경 사항입니다.

1) 각 셀에 id인덱스에 해당 하는 값을 부여했습니다.

cell.id = "cell_" + i;

2) 오타 수정 :

on_drop.value = "drop(event, this)";

3) ondragover속성을 셀 내부의 X가 아닌 셀로 이동 했습니다. 이것은 빈 셀에서 드롭을 활성화해야하기 때문에 중요합니다.

var on_dragover = document.createAttribute('ondragover');
on_dragover.value = "allowDrop(event, this)";
cell.setAttributeNode(on_dragover);

4)

a) 각 X를 id포함하는 셀과 비슷하게 지정하여 drop이벤트 핸들러가 X를 이동할 때 지울 셀을 알 수 있도록합니다.

b) ondragstart인덱스를 끌어서 놓기 dataTransfer개체에 저장 하는 처리기를 설정 합니다. 이 코드는 최신 브라우저 (MIME 유형 사용)와 이전 버전의 IE ( "텍스트"사용) 모두에서 작동하도록 설계되었습니다.

function createX(obj){
    if (obj.innerHTML == ''){
        var id = obj.id.replace("cell", "X");
        obj.innerHTML = "<h1 id='" + id + "' style='text-align:center;' draggable='true' ondragstart='saveCell(event, this);'>X</h1>";
    } else {
        obj.innerHTML = "";
    }
}

function saveCell(ev, obj) {
    var cell_index = obj.id.substring(2);
    try {
        ev.dataTransfer.setData("text/plain", cell_index);
    } catch (exception) {
        ev.dataTransfer.setData("text", cell_index);
    }
}

5) 현재 원하는 동작과 일치하지 않기 때문에 모든 드롭에서 X를 지우는 줄을 제거했습니다.

function allowDrop(ev, obj) {
    ev.preventDefault();
    //obj.innerHTML = '';
}

6) 여기에 코드 추가 drop():

a)이 셀에 이미 X가 있는지 확인합니다 (있는 경우 삭제 취소).

b)이 셀에 X를 넣습니다.

c) dataTransfer개체 에서 셀 인덱스를 읽고 이를 사용하여 드래그가 시작된 셀을 지 웁니다.

function drop(ev, obj) {
    ev.preventDefault();

    if (obj.innerHTML !== '') { // not empty
        return false;
    } else {
        createX(obj);
    }

    var data;
    try {
        data = ev.dataTransfer.getData("text/plain");
    } catch (exception) {
        data = ev.dataTransfer.getData("text");
    }
    var cell_id = "cell_" + data;
    document.getElementById(cell_id).innerHTML = '';
}