Questions tagged [jquery-ui-selectable]

The jQuery UI Selectable plugin: Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.

The jQuery-ui Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.

API Documentation

239 questions
1
vote
1 answer

Selecting consecutive elements using jQuery selectable

I am trying the Serialize sample in jQuery. I notice one behavior that I can select unrelated elements using mouse and Ctrl key. I only want to select consecutive elements and not all elements on mouse clicks. This is what is happening currently,…
Kunal Mukherjee
  • 5,775
  • 3
  • 25
  • 53
1
vote
2 answers

How do I set every selectable li to a different color on click? (JQuery UI)

This a sample of the script I have so far. The default behavior once an
  • is selected, is to change the background color to orange (also default). My goal is to have every
  • changing to a different color when selected.
  • 1
    vote
    0 answers

    Onclick event is unbound from anchors with jqueryui selectable

    Here is example: https://jsfiddle.net/u90z12zd/ When I comment $('ul').selectable(); onclick events on anchors work, with selectable events are unbound.
    Maxim
    • 243
    • 3
    • 18
    1
    vote
    4 answers

    JavaScript non selectable text not working in Chrome/Internet Explorer

    In Firefox seems fine, Chrome and Internet Explorer the text is still selectable, is there any way around this? The code was taken from another question, (which I can't find right now) so it may be out of date? // Prevent selection function…
    Tom Gullen
    • 61,249
    • 84
    • 283
    • 456
    1
    vote
    1 answer

    Disable input when no item got specific class name

    I got a little codepen where you can select multiple tabs (with jQuery selectable widget). I wanna do the following: If no item got the class name .ui-selected the input #plannername gets disabled. I thought something like this should work: if…
    Tobias Glaus
    • 3,008
    • 3
    • 18
    • 37
    1
    vote
    0 answers

    How to make ionic-filter-bar list selectable

    Im trying to use ionic-filter-bar ($ionicFilterBar) Based on this https://github.com/djett41/ionic-filter-bar http://gonehybrid.com/how-to-add-a-search-bar-in-the-header-on-ionic/ Here is an…
    Axil
    • 3,606
    • 10
    • 62
    • 136
    1
    vote
    1 answer

    checkbox list with divs, how to color rows and select all

    Newbie and first question so be gentle! I found http://jsfiddle.net/MJVKB/169/ from a previous question which works great. I'm trying to find a way to add a 'select all / deselect all checkbox'. I can get the multiple selection to work, but can't…
    Silverburch
    • 457
    • 2
    • 12
    • 28
    1
    vote
    1 answer

    Why the jQuery Selectable plugin doesn't work with a foreach generated list?

    I am currently working on an MVC project and implemented jQuery Selectable plugin. I have a string in my model which I have Split() as below in my view: @{ var size = Model.AvailableSizes.Split(','); foreach (var item in size) { …
    Dawar
    • 99
    • 3
    • 14
    1
    vote
    1 answer

    Selectable and Un/Select all button (jQuery)

    I am attempting to make un/select all buttons that will un/highlight all table rows when clicked. It is fairly straight forward to add the ui-selected class to the table, but not make them draggable. Here is my code that demonstrates the…
    Stacked
    • 27
    • 1
    • 5
    1
    vote
    1 answer

    jQuery selectable items --> get only selected

    I'm trying to capture a list of selected items from jQuery selectable. https://jsfiddle.net/cloudsea/bdgjdq7a/30/ $(".platemap").selectable(); function getSelected() { var selectedVals = []; $('.platemap…
    steve909
    • 13
    • 4
    1
    vote
    1 answer

    How to use arrow keys to move selected elements

    Arrow keys should move selected elements pixel by pixel in addition to moving by mouse. I tried code below but keydown event does not occur. To reproduce, select elements usong laoos and press in arrow keys. Nothing happens. How to fix this so that…
    1
    vote
    0 answers

    Is it possible to make fullcalendar.io to selectable by square in weekView?

    I am making a calendar web-app with fullcalendar.io. sometimes I want to create event or block my schedule same time for some days repeatedly. Can I tweak fullcalendar and make it possible to drag and selected in square? for example drag start from…
    kikiki.blue
    • 541
    • 1
    • 4
    • 12
    1
    vote
    1 answer

    How to draw divs to a specific position without collapse already exits div or without override

    I am working on a demo where page have selectable jQuery for creation square block(area). User can select any area and write some comment with color, entire block will be shown specify position. It working fine. But my main concern is if someone…
    Ashish Chaturvedi
    • 1,352
    • 3
    • 13
    • 37
    1
    vote
    2 answers

    Add Selectable Class on table cell selection

    I have one html table.
    ABCD ABCD
    ABCD ABCD
    I can add selectable class like $(document).ready(function () { …
    mahesh
    • 91
    • 9
    1
    vote
    1 answer

    jQuery selectable manually invoke an event

    I have some jQuery selectable objects. Some items of that objects are selected by default, so i have something like this: HTML
    1. 1
    2. user3450036
      • 85
      • 1
      • 2
      • 10