No Html:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>JQuery UI - Elementos Selecionáveis</title>
<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.10.4.custom.css" />
<link rel="stylesheet" type="text/css" href="/static/css/style_ui_tabs_abas.css" /><!--folha de estilo externa-->
<script type= "text/javascript" src= "/static/js/jquery.min.js"></script> <!--biblioteca jQuery-->
<script type= "text/javascript" src= "/static/js/jquery-ui.min.js"></script>
<!--estilo incorporado à página html-->
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 40%; }
#selectable li { margin: 0.3em; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
</head>
<h2>Elementos Selecionáveis</h2>
<ol id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
</ol>
Na biblioteca jQuery UI, na parte de Widgets Elementos Selecionáveis estão disponíveis maiores informações.