Post
Ask Question

Selectable Interaction in JQuery UI

In previous article, we looked into resizable interaction. In this article, we will cover selectable interaction. We can select an element or group of elements using this interaction. Non-adjacent multiple items can be selected by holding ctrl key and selecting with mouse click. A callback can be called on selecting an element. Below script gives basic selecting feature:

<html>
<head>
    <title>jQuery UI Selectable</title>
  <link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="stylesheet" />
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="ui.core.js"></script>
    <script type="text/javascript" src="ui.selectable.js"></script>
    <style type="text/css">

        #selectable .ui-selecting
        {
            background: green;
        }

        #selectable .ui-selected
        {
            background: red;
            color: white;
        }

        #selectable
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 60%;
        }

        #selectable div
        {
            margin: 3px;
            padding: 1px;
            float: left;
            width: 80px;
            height: 30px;
            font-size: 1em;
            text-align: center;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            //$('#selectable').selectable();
            $("#selectable").selectable({
                stop: function() {
                    var result = $("#result").empty();
                    $(".ui-selected", this).each(function() {
                        var index = $("#selectable div").index(this);
                        result.append(" #" + (index + 1));
                    });
                },
                selected: function(event, ui) { alert("selected: " + ui.selected.innerText); }
            });
        });
    </script>

</head>
<body>
    You selected: <span id="result"></span>
    <br />
    <div id="selectable" style="border-width: thick; margin-bottom: 5px">
        <div>
            Element 1</div>
        <div>
            Element 2</div>
        <div>
            Element 3</div>
        <div>
            Element 4</div>
        <div>
            Element 5</div>
        <div>
            Element 6</div>
    </div>
</body>
</html>

We need below files to implement selectable behavior:

  1. jquery-1.3.2.js
  2. ui.core.js
  3. ui.selectable.js
  4. jquery-ui-1.7.2.custom.css taken from 'sunny' theme.

We can define a region that to be selectable and call selectable() function on it. We can make any DOM elements to be selectable like li, div etc. We can specify below options in selectable() function:

  • selected : This event will be fired after selecting each element.
  • selecting: This event will be fired during selecting the element.
  • start/stop: This events will be fired at the begin/end of selection.
  • distance: Distance in pixels specified to make a element selectable after dragging to that distance.
  • filter: The matching child elements [divs] can be made to be selectable as shown below:

    $('#selectable').selectable({filter: 'div'});

    This option will be helpful, if you have multiple items in selectable container. In above sample, we used stop event to get index of selected items and selected event to get text of selected item.

    For complete list of options, events in Selectable API, refer: http://jqueryui.com/demos/selectable/ .

I am ending the things here. I am attaching the source code with it. In coming articles, we will cover other interactions provided by JQuery UI in depth. I hope this article will be helpful for all.


Similar Articles