Javascript - Drag and Drop FF/Chrome/Edge...
Hi
trying to get a bit of drag n drop going inside a `class` of javascript coding. Managed to get some bits working in chrome, but firefox is being stubborn. Edge well...hmmm...
Anyways, at this stage its just the console.log and returning the elements... but even that doesnt seem to be working.
the coding below for attaching the events.
Code:
txt.dataObj = this;
txt.draggable = true;
txt.addEventListener("drag",function(e){
// e.preventDefault();
// console.log("drag");
// console.log(e.target);
// if( e.target.className.indexOf(this.dataObj.settings.sNameID +"dragover") > -1 ){
// e.target.className=(" "+e.target.className+" ").replace(" "+this.dataObj.settings.sNameID+"dragover ","").trim();
// }
}, true);
txt.addEventListener("drop",function(e){
e.preventDefault();
console.log("dropped");
console.log(e.target);
var d = e.dataTransfer.getText("text");
// if( e.target.className.indexOf(this.dataObj.settings.sNameID +"dragover") > -1 ){
// e.target.className=(" "+e.target.className+" ").replace(" "+this.dataObj.settings.sNameID+"dragover ","").trim();
// }
}, true);
txt.addEventListener("dragexit",function(e){
//e.preventDefault();
console.log("dragexit");
console.log(e);
}, true);
txt.addEventListener("dragstart",function(e){
//e.preventDefault();
console.log("Drag start > "+this.id);
console.log(e.target);
e.dataTransfer.dropEffect="all";
e.dataTransfer.setData('text/plain',e.target);
if( e.target.className.indexOf(this.dataObj.settings.sNameID +"dragstart") < 0 ){
e.target.className+=" "+this.dataObj.settings.sNameID+"dragstart".trim();
}
}, true);
txt.addEventListener("dragend",function(e){
//e.preventDefault();
console.log("Drag end > "+this.id);
console.log(e.target);
console.log("Drop effect > "+e.dataTransfer.dropEffect);
if( e.target.className.indexOf(this.dataObj.settings.sNameID +"dragstart") > -1 ){
e.target.className=(" "+e.target.className+" ").replace(" "+this.dataObj.settings.sNameID+"dragstart ","").trim();
}
}, true);
txt.addEventListener("dragover",function(e){
e.preventDefault();
e.dataTransfer.dropEffect="all";
//console.log("dragover");
//console.log(e.target);
return false;
}, true);
txt.addEventListener("dragenter",function(e){
e.preventDefault();
console.log("dragenter");
console.log(e.target);
if( e.target.className.indexOf(this.dataObj.settings.sNameID +"dragover") < 0 ){
e.target.className+=" "+this.dataObj.settings.sNameID +"dragover";
}
return false;
}, true);
txt.addEventListener("dragleave",function(e){
//e.preventDefault();
console.log("dragleave");
console.log(e.target);
if( e.target.className.indexOf(this.dataObj.settings.sNameID +"dragover") > -1 ){
e.target.className=(" "+event.target.className+" ").replace(" "+this.dataObj.settings.sNameID+"dragover ","").trim();
}
}, true);
** txt is just a variable for the label... Text...
The problem is that in FF its doing a drag over event for the label (fine) and for the text of the label (***?) yet when I attach the drag bits to the container it doesnt register anything. Anyone come across this before? Bug in ff?
Re: Javascript - Drag and Drop FF/Chrome/Edge...
I had a play around at lunch, changed to divs, but it still seems to be firing events on text on firefox... very strange...
