Is it possible for users to highlight list items?

[info-rchitect]

Hi,

I would like to use this library to re-order a list but also allow users to select multiple items and then hit another widget button to delete them from the list.

thx

[AaronWatters]

I read this wrong and added a button to each element to delete it instead of what you asked.

import jp_proxy_widget

colors = "red green blue cyan magenta yellow pink purple brown".split()

def select_callback(list):
    print("The user selected:", list)

widget = jp_proxy_widget.JSProxyWidget()
widget.check_jquery()

widget.js_init("""
    element.html("Please delete the colors you don't like and move the others in your preferre order.");
    element.color_list = $("<ul/>").width("200px").appendTo(element);
    for (var i=0; i<colors.length; i++) {
        var color = colors[i];
        var item = `
        <li class="ui-state-default" data-sort-id="${color}">
            ${color}
            <button class="delete">X</button>
        </li>
        `;
        $(item).appendTo(element.color_list);
    }
    // make it sortable
    element.color_list.sortable()
    // Set up delete buttons:
    // https://stackoverflow.com/questions/8806058/delete-jquery-ui-sortable-list-item
    element.color_list.find(".delete").click(
        function() {
            $(this).parent().remove();
        }
    );
    // Attach a button to report the displayed order back to the Python callback:
    element.report_order = function() {
        // jQuery magic to get the sort order array.
        var display_order = element.color_list.sortable("toArray", {"attribute": "data-sort-id"});
        // call back to Python to report the display order
        select_callback(display_order);
    };
    var done = $("<button>Done</button>").appendTo(element);
    done.click(element.report_order);
""", colors=colors, select_callback=select_callback)

widget.debugging_display()

This is not exactly what you asked for.

I think you can get exactly what you asked for using techniques described here: https://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items/15301704#15301704 -- but I'm leaving this effort for now.

[info-rchitect]

@Aaron-Watters Thanks for the quick reply. Let me dig into what you have. Once I have a solution I will post it here.

[info-rchitect]

@Aaron-Watters Really I think I just need a callback to return the highlighted items in the list. I say this because I am displaying the list in an ipywidgets Output widget with a DELETE button that should handle re-instantiating the list.