Как разработать эту функцию с помощью Javascript?

Question

То, чего я хочу добиться, это:

Например, есть символ, который представляет таблицу на веб-странице, пользователь может перетащить этот элемент в любое место на веб-странице, когдапользователь теряет курсор, появляется диалоговое окно с просьбой ввести значения атрибутов, например, количество столбцов, количество строк, после ввода соответствующая таблица появится в том месте, где пользовательвыбрал.Конечно, символ, который представляет таблицу, все еще находится в исходном месте.Это как веб-версия Dreamweaver.Как это сделать с помощью Javascript?

Answer 1

Если ваш вопрос заключается в том, как начать исследование этой функции, я бы начал с:

• JQuery , чтобы начать работу с необычной, но простой функциональностью JavaScript
• JQuery UI : Draggable , Диалог и т. Д.

Чтобы действительно разработать эту функцию, если вы не знаете, с чего начать, начните с малого. Создайте очень простую веб-страницу, возможно, просто с иконкой и кнопкой, а затем напишите некоторый javascript, чтобы сделать что-то незначительное, например, отобразить диалог и показать результат. Медленно начинайте добавлять такие вещи, как перетаскивание чего-либо и т. Д.

В пользовательском интерфейсе JQuery есть множество демонстраций, которые вы можете использовать в качестве основы для настройки.

Предупреждение: Когда я впервые зашел на страницу демонстраций пользовательского интерфейса JQuery, я потратил хотя бы пару дней, чтобы поиграть со всеми их классными вещами. Это так просто, потому что источник прямо здесь, и вы также можете увидеть, как он работает в браузере на демонстрационной странице.

Answer 2

Начните с определения требований вашего проекта. Разбейте его на более мелкие задачи и этапы. Затем некоторое изучение и исследование того, что могут обеспечить javascript и такие фреймворки, как jquery. Также проверьте наличие существующих решений или компонентов, которые вы можете использовать, и сократите свои усилия по разработке.

Answer 3

Вы смотрели демонстрационные страницы пользовательского интерфейса jQuery? Демоверсия simple photo manager содержит все основные элементы, которые вам понадобятся: перетаскивание элемента, обработка события перетаскивания, выполнение чего-то особенного при перетаскивании. Демоверсия revert также может представлять интерес