在非输入元素中捕获“ Selstart”，“ Sel..end”

Question

I'm setting up a table, formatted like this.. Please forgive the silly sample data. All of this is actually loaded with json, but the output looks like this:

<table id="famequotes">
<tr><td id="par001">It was the best of times, it was the worst of times.</td></tr>
<tr><td id="par002">Two things are infinite: the universe and human stupidity; and I'm not sure about the universe</td></tr>
<tr><td id="par003">In the jungle, the mighty jungle, the lion sleeps tonight...</td></tr>
</table>

Using mousedown on $("#famequotes td"), and mouseup, I can allow users to highlight text and capture the start and end row, and similarly capture all the rows in between with onmouseover.

What I want to do is capture the SelStart of the start row (the table cell I started highlighting from) and the sel...stop of the last row.

I have not been able to find an answer, though I have researched and google searched already.

MIchal Hainc's answer is really cool, but not what I am seeking.

I can see how the selection box could be useful, and I would love to incorporate it.

However, what I'm actually seeking is so that if the user highlights text as I've highlighted in http://jsfiddle.net/vhyyzeog/1/ it would return 3 for selStart and 12 for selEnd. I'm already tracking the first highlighted row, and the last, so I know what rows to apply selstart and selend to.

Thank you for any help.

Answer 1

I have constructed a fiddle for you here: http://jsfiddle.net/jra9ttot/16/

I have used jQuery UI widget "selectable"... the javascript is like this:

You can select like in windows explorer... drag a lasso with the mouse over your table cells, it will select multiple...

    $(document).ready(function () {
        $('#famequotes').selectable({
            filter: 'td',
             start: function (event, ui) {
                $('#log').append('<div>selction start: ' + $(event.toElement).attr('id') + '</div>');
            },
            selected: function (event, ui) {
                $('#log').append('<div>selected item: ' + $(ui.selected).attr('id') + '</div>');
            },
            stop: function (event, ui) {
                var lastSelElem = $('#famequotes').find('td.ui-selected').last();
                 $('#log').append('<div>selection end: ' + $(lastSelElem).attr('id') + '</div>');
            }
        });
    });

Answer 2

I found an answer to this question elsewhere on Stack's site. It's not as pretty and perfect as I'd imagined it might be.

Source: Hussein's answer to "Get selected text's html in div"

Here's sort of the groundwork for how you can obtain useful data from this, if you want more than the basic selected text.

http://jsfiddle.net/YstZn/541/

if (!window.x) {
    x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    console.log(window.getSelection().anchorNode.parentNode);
    console.log(window.getSelection().focusNode.parentNode);
    return t;
}

$(document).ready(function() {
    $(document).bind("mouseup", function() {
        var mytext = x.Selector.getSelected();
        alert(mytext);
    });
});

It's not quite what I'd imagined, but it definitely provides the elements I need to accomplish my task.