Jump to content

Recommended Posts

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!

Link to comment
https://forums.phpfreaks.com/topic/186318-which-tag-was-clicked-help-needed/
Share on other sites

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>

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.