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.
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.
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.
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.
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.