이벤트 리스너가 제거되지 않습니다. 왜?

Question

비슷한 질문이 스택에 이미 대답되어 있지만 어떤 이유로 그 해결책이 나를 위해 작동하지 않는다는 것을 알고 있습니다. 간단한 드래그 앤 드롭 게임/활동을 만들려고합니다. 사용자는 요소를 드래그 할 수있는 시도를 한 번만 가질 수 있으므로 드래그 한 경우 관련된 드래그 이벤트 리스너를 제거하려고합니다. 그것이 의미가 있기를 바랍니다. 내가 나중에 드래그 할 요소에 이벤트 리스너를 추가하고 init 함수에서

HTML

<div id="boxes"> 
<div id="b1" class="box" draggable="true"><header>Vacuum Tubes</header></div> 
<div id="b2" class="box" draggable="true"><header> Eniac</header></div> 
<div id="b3" class="box" draggable="true"><header> Transistors </header> </div> 
<div id="b4" class="box" draggable="true"><header> Integrated Cicuits</header> </div> 
<div id="b5" class="box" draggable="true"><header> Microprocessor </header> </div> 
</div> 

: 그리고 여기에 코드입니다.

function init(){ 
cols = document.querySelectorAll('#boxes div.box'); 
[].forEach.call(cols, function(col) { 
boxes.push(col); 
states.push("false"); 
col.addEventListener('dragstart', handleDragStart, false); 
col.addEventListener('dragend', handleDragEnd, false);} 
} 

* * 상자, 국가와 COLS 내가 다음 코드

를 가지고있는 요소의 낙하를 처리하는 기능에서보다 초기화() 함수

외부에서 정의와 선언 배열 인

dragSrcEl.removeEventListener('dragstart', handleDragStart, false); 
dragSrcEl.removeEventListener('dragend', handleDragEnd, false); 
cols[i].removeEventListener('dragstart', handleDragStart, false); 
cols[i].removeEventListener('dragend', handleDragEnd, false); 
cols[i].draggable=false; 
dragSrcEl.draggable=false; 

그래서 나는이 요소가 세 가지 다른 방법으로 끌리는 것을 막으려하고 있습니다. 그리고 여전히 작동하지 않습니다. 사용자는 여전히 요소를 드래그 할 수 있습니다. 내 질문 1 : 어떻게 'dragstart'및 'dragend'이벤트 수신기를 제거 할 수 있습니까? 내 질문 2 : 왜 내 코드가 작동하지 않습니까?

도움에 감사드립니다. J

Answer 1

브라우저 간의 행동의 폭 넓은 변화가있다. 제가 생각할 수있는 유일한 방법은 Firefox가 기대하는대로 동작하는 것입니다.

draggable 속성만으로도 Internet Explorer, Edge 및 Chrome에서 드래그 할 수 있습니다. 반면에 firefox는 event.dataTransfer.setData (mimetype, valuestring)가 호출 될 때까지 드래그 모드로 들어 가지 않습니다. 선택한 텍스트와 이미지의 경우 자동으로 발생하므로 마술처럼 드래그 할 수 있습니다.

FF로 값을 설정하려면 dragStart 핸들러가 있어야하며 핸들러가 있으면 true를 반환해야합니다. 그렇지 않으면 여전히 드래그 모드가되지 않습니다.

균일 한 크로스 브라우저 동작을 얻으려면 FF 방식으로 수행해야하며 끌어 오기 시작 여부를 나타내는 draggable 값을 설정해야 IE, Edge 및 Chrome에서 끌기를 억제 할 수 있습니다. false를 돌려주는 것도 효과가 있을지 모르지만 그 사실을 확인해야합니다.

Answer 2

먼저 구문을 확인하십시오. 나는 너의 js를 jsfiddle에 넣고 통역관을 만났다. console.log를 보면 구문 오류가 발생할 수 있습니다. 나는 (그것을 확인 말한다) jslint 후를 실행할 때

function init(){ 
cols = document.querySelectorAll('#boxes div.box'); 
[].forEach.call(cols, function(col) { 
    boxes.push(col); 
    states.push("false"); 
    col.addEventListener('dragstart', handleDragStart, false); 
    col.addEventListener('dragend', handleDragEnd, false); 
}); /* <--- Check this here. */ 
} 
init(); 
console.log($('#boxes > div.box')); 

그런 다음, 만 푸시 기능을 가진 형식 오류가있다.

건배 느긋한