recherche des deux éléments environnants dans une liste lorsque l'on clique à l'intérieur du conteneur d'une liste

Question

Supposons que j'aie un conteneur contenant une liste d'éléments, de sorte que le balisage ressemble à quelque chose comme

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

Supposons que le conteneur et les éléments soient raisonnablement espacés, de sorte qu'il soit possible de cliquer dans l'espace entre deux éléments. Ce que je veux, c'est capturer ce clic et insérer un nouvel élément de liste modifiable à l'endroit où l'utilisateur a cliqué. Pour pouvoir insérer un nouvel élément de liste, je dois connaître l'élément à insérer après ou avant.

Je parviens à attraper ce clic sur le container classe. Mais alors ...

J'aimerais obtenir la position du clic, et plus important encore : J'aimerais obtenir la position la plus proche (environnante). list-item afin que je puisse insérer un nouveau list-item .

Quelqu'un a-t-il une idée de la marche à suivre ?

Answer 1

En supposant que la liste soit verticale et que les éléments soient positionnés dans l'ordre où ils apparaissent, vous pouvez utiliser la position du clic de l'événement pour la comparer aux positions des éléments sur la page, et ajouter l'élément de la liste en conséquence, quelque chose comme ceci :

$(".container").click(function(e){
    $(this).find(".list-item").each(function(el){

        if ($(this).offset().top > e.pageY) {

          // insert after this
            $('<div />').addClass('list-item').text('...').insertBefore(this);

          return false;
        }
    });

});

exemple : http://jsfiddle.net/niklasvh/qjcvf/

Si la liste est horizontale, vous utiliserez plutôt le décalage X, mais si elle est à la fois verticale et horizontale, cela rendra la tâche un peu plus difficile.

Une autre approche consiste à ajouter des éléments cachés entre les éléments de la liste, que vous pourriez utiliser comme déclencheurs lorsque l'utilisateur clique dessus, afin de savoir exactement où l'élément est positionné par rapport aux éléments de la liste.

Answer 2

J'adopterais la même approche que Niklas, en ajoutant toutefois ce qui suit :

• Vérifier si le conteneur est la cible directe du clic, afin d'éviter les clics sur le conteneur <li> d'ajouter de nouveaux éléments.
• Utilisation clone() pour ajouter le nouvel élément.

Voici ce qu'il en est :

$(".container").click(function(e) {
    var container = $(this);

    if (container.is(e.target)) {

        container.find(".list-item").each(function(index, element) {
            var el = $(element);

            if (el.offset().top > e.pageY) {
                el.clone().text('...').insertBefore(element);

                return false;
            }
        });
    }
});

JSFiddle : http://jsfiddle.net/PPvG/t43y2/

Answer 3

Vous pouvez le faire en utilisant l'espacement des objets (pour les objets horizontaux).

JSFiddle : http://jsfiddle.net/5kUWp/26/

JS :

$('div.list-item').live('click',function(e){
  var diff=e.pageX - this.offsetLeft;
  if(diff>$(this).width()) {
   var div = $('<div />');
   div.addClass('list-item');
   div.html($(this).text()+'....');
   div.attr('id','item-new');
   $(this).after(div);
  }
});

CSS :

div.list-item {
    padding-right:14px;
    margin:4px;
    float:left;
    border-right:1px dotted #444;
}