homepage Welcome to WebmasterWorld Guest from 107.22.78.233
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
drag and drop
tw56




msg:4393978
 4:20 am on Dec 4, 2011 (gmt 0)

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




msg:4394113
 5:51 pm on Dec 4, 2011 (gmt 0)


<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




msg:4395292
 6:10 pm on Dec 7, 2011 (gmt 0)

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




msg:4396169
 10:18 pm on Dec 9, 2011 (gmt 0)

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




msg:4396618
 1:22 pm on Dec 11, 2011 (gmt 0)

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




msg:4398657
 2:56 pm on Dec 16, 2011 (gmt 0)

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();
}}}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved