Suppose I have a container containing a list of items, so the markup looks something like
<div class="container">
<div class="list-item" id="item-1"> ....</div>
<div class="list-item" id="item-3"> ....</div>
<div class="list-item" id="item-2"> ....</div>
<div class="list-item" id="item-6"> ....</div>
</div>
Suppose the container and the items have reasonable spacing, so it is possible to click in the space between two items. What I want is to capture that click and then insert a new, editable list-item where the user clicked. To be able to insert a new list-item, I will need to know either the item to insert after, or before.
I am able to catch that click on the container class. But then …
I would like to get the position from the click, and most importantly: I would like to get the closest (surrounding) list-items so I can insert a new list-item.
Does anybody have any idea how to go about this?
