-
Oct 31st, 2017, 07:51 PM
#1
Thread Starter
Don't Panic!
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?
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
-
Nov 6th, 2017, 01:44 PM
#2
Thread Starter
Don't Panic!
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...
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|