Проблемы с функцией.sortable в запросе J

Question

Вот JSfiddle, с которым я работаю.

Я пытаюсь создать два списка, из которых я могу перемещать каждый элемент между ними, и изменения будут обновляться ниже в области обновления функции / состояния сортировки.

Мое первое предупреждение в строке 3 работает, но когда я вызываю функцию щелчка в строке 5, предупреждение в строке 6 не работает. В целом, я думаю, что мой код может что-то пропустить или точка с запятой и т.д. неуместны. Пожалуйста, помогите и оставьте отзыв, спасибо.

$(document).ready(function() {
 alert(0);
 $(".shopping_list").onclick(function() {
    alert(1);
    $("#names #places").sortable({
         containment: 'parent', 
        tolerance: 'pointer',
        cursor: 'pointer', 
        revert: true, 
        opacity: 0.60,
        connectWith:"#names #places",
        update: function(event, ui) {
             content = $(this).text();
              $('#sort_status').text(content);
        }
    })

 });
});

Answer 1

Как Grissom указал в своем ответе и комментариях,

• Во-первых, вам нужно добавить jQuery-UI,
• $("#names #places") ищет элемент #places внутри элемента #names, Чтобы выбрать оба элемента, вы должны разделить их запятыми, как $("#names , #places"),
• Вы должны переместить сортируемую инициализацию из события click.

Кроме этого:

• Вам необходимо удалить сдерживание: 'parent' иначе вы не можете перетащить элемент из текущего списка (следовательно, вы не можете перемещать элементы между списками, очевидно)

  демонстрация

• Если вы не хотите <h3> заголовки для сортировки (это также неверно HTML ) - нужно вывести их из <ul>

демонстрация

Answer 2

Прежде всего:$("#names #places") это означает, что у вас есть элемент с идентификатором "names", а этот элемент имеет дочерний элемент с идентификатором "place".

Вы должны настроить сортировку каждого списка. Также:$(".shopping_list").onclick должно быть:

$(".shopping_list").click