{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/javascript-handbook/drag-and-drop/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"e898961e-f929-5433-9a7b-eb3aced504a3","html":"

Heute wies mich ein Leser darauf hin, dass es bei dem Drag&Drop-Beispiel aus Listing 12.43 (HTML) und Listing 12.44 (JavaScript) in Firefox Probleme gibt bzw. folgender Code so nicht funktioniert:

\n
target.addEventListener('drop', function(event) {\n    if(event.target.id === 'target') {\n        // Funktioniert nicht in Firefox\n        event.srcElement.innerHTML += event.dataTransfer.getData('text/html');\n    }\n    onLeave(event);\n})
\n\n

Der Grund dafür ist, dass die Eigenschaft srcElement eine proprietäre Eigenschaft des Internet Explorers ist und daher nicht von allen Browsern unterstützt wird. Stattdessen sollte (wie im übrigen Listing auch) die Eigenschaft target aus dem DOM Standard verwendet werden:

\n
target.addEventListener('drop', function(event) {\n    if(event.target.id === 'target') {\n        // Funktioniert in Firefox und anderen Browsern\n        event.target.innerHTML += event.dataTransfer.getData('text/html');\n    }\n    onLeave(event);\n})
\n

Alternativ lässt sich als Fallback für ältere Internet Explorer auch die Schreibweise event.target || event.srcElement verwenden.

\n
target.addEventListener('drop', function(event) {\n    let targetElement = event.target || event.srcElement;\n    if(targetElement.id === 'target') {\n        targetElement.innerHTML += event.dataTransfer.getData('text/html');\n    }\n    onLeave(event);\n})
\n

Konsequenterweise ist es dann sinnvoll, entsprechendes Konstrukt auch in den anderen Event-Listenern zu verwenden:

\n
target.addEventListener('dragenter', function(event) {\n    let targetElement = event.target || event.srcElement;\n    targetElement.classList.add('dragover');\n});\nfunction onLeave(event) {\n    let targetElement = event.target || event.srcElement;\n    targetElement.classList.remove(\"dragover\");\n}
\n
\n

Merke

\n

Die Eigenschaft srcElement ist nicht im DOM Standard definiert und sollte daher nicht bzw. wenn dann nur als Fallback in Produktivsystemen verwendet werden.

\n
","fields":{"slug":"/posts/javascript-handbook/drag-and-drop/","tagSlugs":["/tag/java-script/","/tag/web-ap-is/","/tag/errata/"]},"frontmatter":{"date":"2017-04-12T16:50:00.000Z","description":"","tags":["JavaScript","Web APIs","Errata"],"title":"Drag&Drop-Beispiel in Firefox"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/javascript-handbook/drag-and-drop/"}}}