JQuery UI - создание дескриптора для выбора

Question

Я хочу объединить сортируемое и выбираемое и хочу создать что-то похожее для выбора. Другими словами, если у меня есть список и div внутри элементов списка я смогу выбрать элемент списка, просто нажав на элемент div. Так же, как вариант ручки для сортировки.

Сортируемый код:

$("#list3").sortable({
    handle:'.PageTreeListMove',
    connectWith: ".droptrue",
    helper: function (e, li) {
        this.copyHelper = li.clone().insertAfter(li);

        $(this).data('copied', false);
        return li.clone();
    },
    stop: function () {
        var copied = $(this).data('copied');

        if (!copied) {
            this.copyHelper.remove();
        }

        this.copyHelper = null;
    }
});
$("#list4").sortable({
    dropOnEmpty: true,
    receive: function (e, ui) {
        var i=0;
        ui.sender.data('copied', true);
        ui.item.html('<a href="">' + ui.item.text() + '</a><span class="PageTreeListDelete">&nbsp;</span>');
        ui.item.attr('id',ui.item.id);
        ui.item.removeAttr('style');
        ui.item.addClass("added");
        var identicalItemCount  = $("#list4").children('li#'+ui.item.attr('id')).length;
        if (identicalItemCount > 1) {
            $("#list4").children('li#'+ui.item.attr('id')).first().remove();
        }
    }
}).disableSelection();

** Выбираемый код:

$("#list3").selectable({
    selecting: function(e, ui) {
        var curr = $(ui.selecting.tagName, e.target).index(ui.selecting);
        selectedItems.push("<li id="+$(ui.selecting).attr('id')+" class='added'><a href>"+$(ui.selecting).text()+"</a><span class='PageTreeListDelete'>&nbsp;</span></li>");
        if(e.shiftKey&&prev>-1) {
            $(ui.selecting.tagName, e.target).slice(Math.min(prev, curr), 1 + Math.max(prev, curr)).addClass('ui-selected');
        } else {
            prev = curr;
        }
    },
    cancel:'ui-selected'
});