Как динамически генерировать сбрасываемые / перетаскиваемые / сортируемые элементы div внутри div?

Question

Здравствуйте, так что я должен разделить на этот вопрос:

1. Я хотел бы иметь возможность динамически создавать элементы div, когда пользователь выполняет действие (скажем, нажимает кнопку, перетаскивает что-то в объект dropble и создает новый объект droppable). Я сейчас использую этот код, и он успешно генерирует блок css:

   функция createDiv () { var divTag = document.createElement ("div");

   divTag.id = "slotclass";

   divTag.className = "connect";

   document.body.appendChild (divTag); } ... хотя я не слишком уверен, как сделать его сбрасываемым / перетаскиваемым / сортируемым после этого.

2. Я бы хотел, чтобы динамически сгенерированный элемент div появился в div, который имеет определенный идентификатор из таблицы стилей css. Однако, когда я использую createDiv (), он генерирует его вне скобок div независимо от того, что я пробовал (например, не закрывая скобки или не помещая мою кнопку в этом случае в скобки div).

Если бы кто-нибудь мог помочь с этими двумя областями, это было бы так здорово! Большое спасибо.

Answer 1

1. Допустим, вы хотите сделать его сортируемым, инициализировать сортировку после добавления дочернего элемента $("#slotclass").sortable({ ... }); или $(divTag).sortable({ ... });

2. Вы добавили свой новый div в теле. Для простоты я использую jQuery. Заменить document.body.appendChild(divTag); на $('#yourtargetdiv').append($(divTag));