1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

trigger drag and drop event by attributes

Discussion in 'jQuery' started by vOlLvEriNe, May 22, 2016.

0
  1. #1
    How can I track drag and drop event if I have more elements, like I have 4 div

        <div data-val="val-1">Menu 1</div>
    <div data-val="val-2">Menu 2</div>
    <div data-val="val-3">Menu 3</div>
    <div data-val="val-4">Menu 4</div>
    HTML:
    and I have 8 list items

    
    <ul>
        <li id="something-1">Something 1</li>
        <li id="something-2">Something 2</li>
        <li id="something-3">Something 3</li>
        <li id="something-4">Something 4</li>
        <li id="something-5">Something 5</li>
        <li id="something-6">Something 6</li>
        <li id="something-7">Something 7</li>
        <li id="something-8">Something 8</li>
    </ul>
    HTML:
    If I drag li having Id something-3 into div having data-val="val-2", How can post it to a file that should post both values.
     
    Solved! View solution.
    vOlLvEriNe, May 22, 2016 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    I would give each of the divs or list items a class and the look for changes to things with class. Then using "this" you are able to get the id and pass that through to the server or whatever.
    You can also select all of the items with that class and loop through them.
    Give the class a name that makes it obvious that it's a jquery tool, rather than something that effects styling.

    In your second example with the list you could attach the class to the <ul> tag but that would make the jquery a little more cumbersome.
     
    sarahk, May 22, 2016 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    The jQuery draggable / droppable should be able to handle this quite easily? Assign the droppable class to the divs, and the draggable class to the list item, and then just pull the info from each element when dropped. I do something similar on a timesheet I gave, but I don't have the code available on my phone. It's not very complicated, however.
     
    PoPSiCLe, May 22, 2016 IP
  4. vOlLvEriNe

    vOlLvEriNe Member

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #4
    This HTML is just example, we can assign class or whatever we need
     
    vOlLvEriNe, May 22, 2016 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #5
    So have we helped?
     
    Last edited: May 22, 2016
    sarahk, May 22, 2016 IP
  6. vOlLvEriNe

    vOlLvEriNe Member

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #6
    @sarahk I'm newbie in JS/jQuery, I need code :D
     
    vOlLvEriNe, May 22, 2016 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #7
    I probably won't have time to look at that this afternoon but it's not hard. Setup a jsfiddle and look at all the examples. It's cut and paste coding - you don't have to write anything new.
     
    sarahk, May 22, 2016 IP
  8. vOlLvEriNe

    vOlLvEriNe Member

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #8
    I've tried, but I couldn't make a working one, I'm trying again, But as I said, I'm newbie ;(
     
    vOlLvEriNe, May 22, 2016 IP
  9. vOlLvEriNe

    vOlLvEriNe Member

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #9
    vOlLvEriNe, May 23, 2016 IP
  10. #10
    Here's an example which logs the values to console: https://jsfiddle.net/rroy3mga/2/ - to write this to a file, you'll need some sort of server-side script receiving the data - via $.post or something.
     
    PoPSiCLe, May 23, 2016 IP
  11. vOlLvEriNe

    vOlLvEriNe Member

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #11
    Thank you So Much, you are amazing <3
     
    vOlLvEriNe, May 23, 2016 IP