I have a group of elements which I want to be selectable.

jQuery UI Selectable seems to be the right tool, but I run into problems where the functionality seems to be bound to all of the child elements, with all the classes being applied.

I want to ensure that the classes and binding of events is only applied to the first generation of children, and not their nested elements.

Here's a jsFiddle which should help illustrate what I'm trying to prevent: /

The Code HTML

<div id="group">
    <div class="unit">
        <h2>Title</h2>
        <div class="content">
            Dulce et decorum
        </div>
    </div>
    <div class="unit">
        <h2>Title</h2>
        <div class="content">
            Dulce et decorum
        </div>
    </div>
    <div class="unit">
        <h2>Title</h2>
        <div class="content">
            Dulce et decorum
        </div>
    </div>
    <div class="unit">
        <h2>Title</h2>
        <div class="content">
            Dulce et decorum
        </div>
    </div> </div>

js

$(document).ready(function(){
    $('#group').selectable();
});

Css (just for illustration)

#group{padding: 12px;}
h2{font-size: 1.2em;margin: 2px 0;}
.unit{background: blue;}
.ui-selected{background: yellow;}

I have a group of elements which I want to be selectable.

jQuery UI Selectable seems to be the right tool, but I run into problems where the functionality seems to be bound to all of the child elements, with all the classes being applied.

I want to ensure that the classes and binding of events is only applied to the first generation of children, and not their nested elements.

Here's a jsFiddle which should help illustrate what I'm trying to prevent: http://jsfiddle/ncKEW/

The Code HTML

<div id="group">
    <div class="unit">
        <h2>Title</h2>
        <div class="content">
            Dulce et decorum
        </div>
    </div>
    <div class="unit">
        <h2>Title</h2>
        <div class="content">
            Dulce et decorum
        </div>
    </div>
    <div class="unit">
        <h2>Title</h2>
        <div class="content">
            Dulce et decorum
        </div>
    </div>
    <div class="unit">
        <h2>Title</h2>
        <div class="content">
            Dulce et decorum
        </div>
    </div> </div>

js

$(document).ready(function(){
    $('#group').selectable();
});

Css (just for illustration)

#group{padding: 12px;}
h2{font-size: 1.2em;margin: 2px 0;}
.unit{background: blue;}
.ui-selected{background: yellow;}

• javascript
• jquery
• css
• jquery-ui
• selectable

Share Follow asked Apr 26, 2013 at 10:56 daveyfahertydaveyfaherty 4,61322 gold badges2828 silver badges4242 bronze badges 1

• Maybe I am too stupid, but I don't understand the problem... – Christian Commented Apr 26, 2013 at 11:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

use the filter option.

$(document).ready(function(){
    $('#group').selectable({
        filter: " > div"
    });
});

Demo: Fiddle