I've built this checker-board app which uses HTML5's Drag&Drop with javascript. It works great on chrome and firefox, but not on IE9 or IE8. My guess is that the problem is with how I attached the events.
This here is where the events are attached for all browsers BUT IE:
function eventer(){
for (var i = 0, len = allPieces.length; i < len; i++){
allPieces[i].addEventListener('dragstart', handlePieceDragStart, false);
}
for (var i = 0, len = allSquares.length; i < len; i++){
allSquares[i].addEventListener('dragstart', handleDragStart, false);
allSquares[i].addEventListener('dragenter', handleDragEnter, false);
allSquares[i].addEventListener('dragover', allowDrop, false);
allSquares[i].addEventListener('dragleave', handleDragLeave, false);
allSquares[i].addEventListener('drop', handleDrop, false);
}
}
...and this is the attachments for IE:
function eventerIE(){
for (var i = 0, len = allPieces.length; i < len; i++){
allPieces[i].attachEvent('dragstart', handlePieceDragStart, false);
}
for (var i = 0, len = allSquares.length; i < len; i++){
allSquares[i].attachEvent('dragstart', handleDragStart);
allSquares[i].attachEvent('dragenter', handleDragEnter);
allSquares[i].attachEvent('dragover', allowDrop);
allSquares[i].attachEvent('dragleave', handleDragLeave);
allSquares[i].attachEvent('drop', handleDrop);
}
}
These are the functions that are called on event:
function handleDragStart(e){
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handlePieceDragStart(e){
dragPiece = this;
e.dataTransfer.setData('id', dragPiece.id);
dragPieceId = dragPiece.id;
}
function handleDragEnter(e){
this.classList.add('over');
}
function allowDrop(e){
e.preventDefault();
};
function handleDragLeave(e){
this.classList.remove('over');
}
function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
pId = e.dataTransfer.getData('id');
this.taken = dragPiece.id;
sId = this.id;
}
var sqrs = document.getElementsByTagName("td");
[].forEach.call(sqrs, function (col){
col.classList.remove('over');
});
for(var i=0, len = piecesPosition.length; i < len; i++){
if (piecesPosition[i][0]==dragPiece.id){
delete piecesPosition[i];
piecesPosition.push([dragPiece.id,sId]);
piecesPosition = piecesPosition.filter(function(){return true});
}
}
dragPiece = document.getElementById(dragPieceId);
dragPiece.pstn = sId;
this.classList.remove('over');
}
I hope the code gives a good idea as to what is happening there, if you have any questions about it I would love to comment and explain more.
Thanks ahead
EDIT: After Iv'e changed the events as @Chase suggested, The functions are being called upon event, and now I get an Invalid argument
error for e.dataTransfer.setData('text/html', this.innerHTML);
inside the function handleDragStart
.
Again, that's only in IE9 and IE8 mode.
Complete HTML/CSS Course 2022 Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.
Set the policy value for Computer Configuration -> Administrative Templates -> Windows Components -> Internet Explorer -> Internet Control Panel -> Security Page -> Restricted Sites Zone -> 'Allow drag and drop or copy and paste files' to 'Enabled', and select 'Disable' from the drop-down box.
The HTML Drag and Drop API relies on the DOM's event model to get information on what is being dragged or dropped and to update that element on drag or drop. With JavaScript event handlers, you can turn any element into a draggable item or an item that can be dropped into.
setData() The DataTransfer. setData() method sets the drag operation's drag data to the specified data and type. If data for the given type does not exist, it is added at the end of the drag data store, such that the last item in the types list will be the new type.
Use "text" instead of "text/html"
e.dataTransfer.setData("text", this.innerHTML);
See this article for explanation
Even though Internet Explorer started out by introducing only "text" and "URL" as valid data types, HTML5 extends this to allow any MIME type to be specified. The values "text" and "URL" will be supported by HTML5 for backwards compatibility, but they are mapped to "text/plain" and "text/uri-list".
You need to do two things for the drag and drop to work in I.E..
1) When you set and get the data use 'text' and not 'text/html'
e.dataTransfer.setData('text', this.innerHTML);
e.dataTransfer.getData('text');
2) Prevent the default behaviour when handling 'dragenter' (as well as 'dragover').
function handleDragEnter(e) {
if (e.preventDefault) {
e.preventDefault();
}
...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With