Problem Description

Users want to copy text in a listbox, the current solution is "nonselectableTag".

<listbox nonselectableTags="span, a">
	<listhead><listheader> nonselectableTags=" span, a"</listheader></listhead>
    <listitem><listcell><textbox/></listcell></listitem>
    <listitem><listcell><a href="http://www.zkoss.org">www.zkoss.org</a></listcell></listitem>
    <listitem><listcell><label>text_without_space</label></listcell></listitem>
    <listitem><listcell><label>long text with space</label></listcell></listitem>
</listbox>

A customer reported that he wants "to be able to select a line by clicking and also select text within the line by clicking and dragging".

2 issues with nonselectableTag:

1. It's very tricky to highlight a text by dragging mouse pointer.
   You must be very carefully not to release mouse outside of the text, or zk will think you do not click on a <span> then listbox will select the item and cancel the highlighting. Although double clicking can also highlight the text, but this doesn't work for text with space.
2. click label cannot select the item.
   So users must be aware of clicking outside of a text to select them. Although this effect is just the result when setting nonselectableTag="span", but it also causes inconvenience when selecting an item. Because users just want to copy text, this behavior looks like a side effect to enable highlighting text.

Proposed Solution

If we can distinguish dragging and clicking, we can avoid select an item when mouse dragging. For example, we use window.getSelection() to determine whether if users select a text or not.

<script type="text/javascript"><![CDATA[
zk.afterLoad('zul.sel', function () {
	var oldMethod = {};
	zk.override(zul.sel.SelectWidget.prototype, oldMethod, {		
		_shallIgnore: function(evt, bSel){
		 	var selection = window.getSelection();
		 	 if(selection.type == "Range") {
			    //evt.stop({propagation:true});
			    return true;
			 }else{
				return oldMethod._shallIgnore.apply(this, arguments); //call the original method
			 }
		}
	
	});
});	
]]>
</script>

Above code is just showing an idea. For IE, getSelection() is only supported since IE 9. Prior to IE 9, we can use document.selection(). (ref http://stackoverflow.com/questions/5421892/getselection-not-working-in-ie)