drag and drop

[tw56]

So I finally got a script to work like I want it to. Haven't been doing much web design for a few years so it wasn't easy to figure out. Seems to work in chrome which I used while developing, and firefox. Any ideas to investigate what might be the problem with IE9 or work around to use. Doesn't work in opera either. To tell the truth I'm lucky I have any hair in my head after try to figure it out for chrome.

[tw56]

<p class="one" id="" draggable="true" ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)">"some text "</p>

This is my draggable paragragh. Does it need some other thing to set as draggable in IE?

[tw56]

Well I finally found a demo that has it working, but not sure if I can post a link here. It has drag and drop working in internet explorer. I will try to adapt it to my working chrome drag and drop.

[tw56]

I got the drag and drop working in IE except you have to select the text and then drag it. Any way to select it in one step? Onmouse over maybe. <div class="one" id="1" draggable="true">Some text</div>

[tw56]

I got the selection working for IE by using a text area with onmouseover to select text, but now its not working with chrome. Further investigation and testing needed.

[tw56]

Finally! Here is a working code for chrome, firefox, IE.
I pull in a list of words in one column and a list of pics in the other with ajax requests. Then apply settings to make drag and drop work. Its a matching game and the correct match deletes the word and pic. I used a nice countdown timer fotiman posted on this site. Any suggestions for improvement appreciated. I can't claim credit for all code
as I have searched dozens of examples to make drag and drop work.

var dragged;
function addragdrop() {
var links = document.querySelectorAll('.one'), el = null;
 for (var i = 0; i < links.length; i++) {
 el = links[i];
el.setAttribute('draggable', 'true');
el.setAttribute('onmouseenter', 'onmouseoverie(' + el.id + ')');
addEvent(el, 'dragstart', function (e) {
e.dataTransfer.setData('Text', this.id);
e.dataTransfer.effectAllowed = 'move';
dragged = this;
CountdownTimer.start();
})
addEvent(el, 'dragend', function (e) {
 // remove the dragged element
if(dragged == 'done') {
this.parentNode.removeChild(this);
}})
}
var drpzne = document.querySelectorAll('.two'), el = null;
 for (var i = 0; i < drpzne.length; i++) {
 el = drpzne[i];
addEvent(el, 'dragover', function (e) { 
if (e.preventDefault) e.preventDefault(); // allows us to drop
 //this.className = 'over';
 return false;
});
//addEvent(el, 'dragleave', function () {
 //this.className = '';
//});
addEvent(el, 'drop', function (e) {
 if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why?
if(dragged.id == this.id) {
if (e.preventDefault) e.preventDefault(); // allows us to drop
dragged = 'done';
if(this.parentNode.childElementCount==1) {
CountdownTimer.stop();
}
this.parentNode.removeChild(this);
}});
}
}
onmouseoverie = function(e) {
var srcObj = document.getElementById(e);
if(window.getSelection) {
window.getSelection().selectAllChildren(srcObj);
} else { 
if(document.selection) {
var rangeObj = document.body.createTextRange();
rangeObj.moveToElementText(srcObj);
rangeObj.select();
}}}