Nie jestem pewien, czy tytuł jest dobrze wybrany ...

Próbuję symulować zaznaczanie tekstu w HTML / JS / CSS, aby pozbyć się bańki akcji na urządzeniu mobilnym podczas prawdziwego wybierania tekstów.

Aby być bardziej szczegółowym, staram się tego uniknąć:

Wizualne:

Sposób, w jaki go zbudowałem i może się zmienić, ponieważ nie ma znaczenia, jest to, że wybrany tekst jest zawinięty wewnątrzspan.selection a wewnątrz tego tagu są również dwie karetki używane jako programy obsługi:

Lorem ipsum dolor                            <!-- Unselected Text -->

<span class="selection">                     <!-- Start selection wrapper -->

  <span rel="previous" class="caret"></span> <!-- The left-side caret -->

  sit amet, consectetur                      <!-- The selected texts -->

  <span rel="next" class="caret"></span>     <!-- The right-side caret -->

</span>                                      <!-- End selection wrapper -->

adipiscing elit.                             <!-- Unselected Text -->

W idealnej sytuacji fajnie byłoby użyć przeciągania i upuszczania, aby wybrać więcej lub mniej tekstów, ale uważam, że byłoby to trudniejsze do zrobienia iw takim przypadku, może to być kliknięcie na karnety, aby wybrać poprzednie lub następne słowo i owinąć go w.selection nie byłoby tak źle.

Oto jsfiddle:http://jsfiddle.net/m6Qx4/

Teksty otaczające mogą zawierać także znaczniki HTML, takie jak:<i>, <b>, <span> i<ul>/<li> może być obecny, utrudniając analizowanie.

Jakieś pomysły, jak można to zrobić?

Aktualizacja statusu:

Udało mi się to zrobić.click(); detektor zdarzeń za pomocą moich niestandardowych metod jQuery.

Ostatecznie zastąpię zdarzenia kliknięcia jQuery UI draggable, aby wybrać otaczające słowa, o ile są one użyteczne dla urządzeń mobilnych.

Mój obecny błąd polega na zmianie położenia czerwonych karier. Próbowałem je zniszczyć i wstawić / dodać z powrotem i nadal nie działa. Może to być błąd w Firefoksie, który nie może poprawnie załadować DOM po zmianach dokonanych w węzłach tekstowych?

Odniesienie: jsFiddle

Aby sprawdzić stan pracyjsFiddle.net z powodu ostatnich przestojów, odwiedź ichTweety.