найти два окружающих элемента в списке, если щелкнуть внутри контейнера списка

Question

Предположим, у меня есть контейнер со списком элементов, поэтому разметка выглядит примерно так:

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

Предположим, что контейнер и элементы имеют разумный интервал, поэтому можно щелкнуть в промежутке между двумяПредметы.Я хочу захватить этот щелчок, а затем вставить новый редактируемый элемент списка, по которому щелкнул пользователь.Чтобы иметь возможность вставить новый элемент списка, мне нужно знать, какой элемент нужно вставить после или до этого.

Я могу поймать этот щелчок по классу container.Но затем ...

Я хотел бы получить позицию от щелчка, и самое главное: я хотел бы получить ближайшие (окружающие) list-item s, чтобы я мог вставить новый list-item.

Кто-нибудь знает, как это сделать?

Answer 1

Если предположить, что список расположен вертикально и элементы расположены в том порядке, в котором они появляются, вы можете использовать позицию щелчка по событию для сравнения с позициями элементов на странице и соответственно добавить элемент списка, например, так:

$(".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;
        }
    });

});

пример: http://jsfiddle.net/niklasvh/qjcvf/

В случае, если список является горизонтальным, вместо него будет использоваться смещение X, но если оно будет как вертикальным, так и горизонтальным, это несколько усложнит задачу.

Другой подход заключается в добавлении скрытых элементов между элементами списка, которые вы можете использовать в качестве триггеров, когда пользователь щелкает по ним, чтобы точно знать, где расположен элемент относительно элементов списка.

Answer 2

Вы можете сделать это, используя отступы для объектов (это для горизонтальных элементов)

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

Answer 3

Я бы выбрал тот же подход, что и Никлас, но добавил бы следующее:

• Проверьте, является ли контейнер прямой целью клика, чтобы клики на самих <li> не добавляли новые элементы.
• Используйте clone() для добавления нового элемента.

Примерно так:

$(".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/