dbz Posted December 25, 2009 Share Posted December 25, 2009 Hello! I'm trying to create my own drag and drop engine and it's turning out to be quite difficult seeing as I'm not quite an expert at the language at the moment. However, let me just skip to my problem: I have a list. I want the person to be able to click one item, and drag it up or down and have it switch with the list element above or below the element above or below it! The part I am at now is unfortunately still the beginning. I've been trying to figure out which LI element was clicked without giving each LI element its own ID. This is as close as I can get: function startDrag(e) { var targ =e.target; alert(targ.tagName); } That will tell me LI I also did: var x = document.getElementById("content").getElementsByTagName("li"); //x //.item(0); //.innerHTML; But the problem is in the item(number) part. I'm not sure how to get the correct number. So I guess what I am trying to figure out is the node number? I know there will be *some* <li> tags in the content <div>, but I don't know how many. And I know I'll have x.length many- But I need to find out which one was clicked, so I can have it move when the person moves the mouse up or down. Anyways! Thanks for reading and for any help provided. It is greatly appreciated. If anyone wants status updates on my website I'll be happy to provide them XD I'm a slow worker, but it's cool to watch the site slowly grow haha. But back to the help: I don't want anyone to write an entire drag and drop engine for me, but if all of the code I've written (I only provided a simple version of my starting part) I can give that. Alrighty! Thanks for the help! Quote Link to comment Share on other sites More sharing options...
Psycho Posted December 28, 2009 Share Posted December 28, 2009 This is a hack solution, but it does work (assuming you don't have two LI items with the same text <html> <head> <script> function getIndex(obj) { var liText = obj.innerHTML; var ulObj = obj.parentNode; var liLength = ulObj.childNodes.length; for(var i=0; i<liLength; i++) { if (ulObj.childNodes[i].innerHTML==liText) { return i; } } return false; } function alertIndex(obj) { alert(getIndex(obj)); } </script> </head> <body> <ul id="ul_obj"> <li onclick="alertIndex(this);">Zero</li> <li onclick="alertIndex(this);">One</li> <li onclick="alertIndex(this);">Two</li> </ul> </body> </html> Quote Link to comment Share on other sites More sharing options...
dbz Posted December 28, 2009 Author Share Posted December 28, 2009 Great. This works and I'll make sure no two items are the same with labels at the beginning like "1)," "2)," and "3)." Thanks a ton! In case anyone else wants the return to be in sequential order, just change the return i; to return (i-1)/2; (and then you can do +1 id you don't want it to start at 0.). Thanks again you really helped me. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.