Jaydeep Shah Ответов: 1

Перетаскивание форм-входов с помощью jquery. Как этикетка фиксируется после

Я хочу создать динамические элементы управления формами.

где текстовое поле, переключатель можно перетащить в форму.


Я нашел перетаскивание здесь.

[^]

и ниже ссылка именно то что мне требовалось но здесь требуется перетаскивание
http://jsfiddle.net/techbrij/uNNMr/

Что я уже пробовал:

@{
Видовой мешок.Название = "draganddrop3";
Layout = null;
}

<h2>draganddrop3</h2>
<!doctype html>
<html lang="en">
<голова>
<meta charset="utf-8">
в <мета имя="область просмотра" содержимого="ширина=устройство-ширина, начально-масштаб=1"и GT;
в <название>в десантирования с jQuery пользовательского интерфейса - функция по умолчанию&ЛТ;/название&ГТ;
<link rel="таблица стилей" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="таблица стилей" href="/resources/demos/style.css">
<стиль>
#коробка {
ширина: 100px;
высота: 100px;
прокладка: 0,5 ЭМ;
поплавок: левый;
маржа: 10px 10px 10px 0;
}

.перетаскиваемый {
поплавок: левый;
z-индекс: 99;
}

#сбрасываемый {
ширина: 300px;
высота: 500px;
прокладка: 0,5 ЭМ;
положение: абсолютное;
осталось: 33%;
топ: 15%;
маржа: 10px;
}
</стиль>
&ЛТ;скрипт СРЦ="https://code.jquery.com/jquery-1.12.4.js"&ГТ;&ЛТ;/скрипт>
&ЛТ;скрипт СРЦ="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&ГТ;&ЛТ;/скрипт>
<скрипт>
$(функция () {
$(".перетаскиваемый").перетаскиваемый();
$("#десантирования").десантирования({

падение: функция (событие, пользовательский интерфейс) {
отладчик;
ВАР draggableId = ИП.можно перетаскивать.буква attr("идентификатор");
//каждый раз getfileldId получает текстовое поле (как я могу получить значение currend draggable id)
если (ИП.можно перетаскивать.буква attr("идентификатор") == "текстовое поле") {
$(этот).добавить (в'<идентификатор входного="Текст1" тип="текст" /&ГТ;')
}
остальное, если (пользовательского интерфейса.можно перетаскивать.буква attr("идентификатор") == "chekbox") {
$(этот).добавить (в'<идентификатор входного="Checkbox1" тип="флажок" /&ГТ;')
}
остальное, если (пользовательского интерфейса.можно перетаскивать.буква attr("идентификатор") == "выпадающего") {
$(этот).функции append('&ЛТ;выберите имя="выпадающий список"и GT;' +
в '<значение параметра="Вольво"и GT;Вольво&ЛТ;/вариант&ГТ;' +
в '<значение параметра="Сааб"и GT;Сааб&ЛТ;/вариант&ГТ;' +
в '<значение параметра="фиат"и GT;Фиат&ЛТ;/вариант&ГТ;' +
в ' <значение параметра="Ауди"и GT;Ауди&ЛТ;/вариант&ГТ;' +
'</select>')

}

}
});
});
</script>
</head>
<тело>

<div id="" class="">
<ул класс="перетаскивать" идентификатор="текстовое поле">В поле&ЛТ;/&ГТ;&ЛТ;/ул>&ЛТ;БР /&ГТ;
<ул класс="перетаскивать" идентификатор="chekbox"&ГТ;chekbox&ЛТ;/&ГТ; &ЛТ;/ул>&ЛТ;БР /&ГТ;
<ул класс="перетаскивать" идентификатор="выпадающий"&ГТ;в выпадающем списке на</&ГТ;&ЛТ;/ул>&ЛТ;БР /&ГТ;


</div>

&ЛТ;див ИД="десантирования" класс="пользовательского интерфейса-виджет-заголовок"&ГТ;
&ЛТ;п&ГТ;перетащите сюда&ЛТ;/п&ГТ;
</div>


</body>
</html>

Karthik_Mahalingam

что вы уже пробовали?
покажите код.

Jaydeep Shah

Эй, @Karthik, я обновляю свой полный код здесь!

в настоящее время текстовое поле успешно добавлено.
но getfileldId alwasy получает "текстовое поле", поэтому другие мои элементы управления не работают.


$("#десантирования").десантирования({
падение: функция (событие, пользовательский интерфейс) {
ВАР getfileldId = $(".перетаскивать").буква attr("идентификатор"); //каждый раз, когда getfileldId сделать текстовое поле (как я могу вам currend перетаскивать значение ID)
если ($(".перетаскивать").буква attr("идентификатор") == "текстовое поле") {
$(этот).добавить(")
}
остальное, если ($(".перетаскивать").буква attr("идентификатор") == "chekbox") {
$(этот).добавить(")
}
еще {
//выпадающий код.
}
}
});
});

мой полный код находится в разделе "Что я пробовал:" .
спасибо

Karthik_Mahalingam

вы можете разместить ваш код в скрипку?

Jaydeep Shah

https://jsfiddle.net/shahjaydeep/jjamj2r7/

Я сделал перетаскивание и падение :)

теперь мне требовался уникальный идентификатор каждого элемента управления полями
предположим, я перетаскиваю 3-разовое текстовое поле, тогда весь идентификатор текстового поля должен быть уникальным, как я могу это получить?

и как я могу сохранить в БД, используя динамическую форму . ?

1 Ответов

Рейтинг:
5

Karthik_Mahalingam 

function getNewId(type) {
           var newId;
           if (type == "textbox")
               newId = $('#droppable').find(':text').length
           if (type == "chekbox")
               newId = $('#droppable').find(':checkbox').length
           if (type == "dropdown")
               newId = $('#droppable').find('select').length
           return type + (newId + 1);
       }


       $(function () {
           $(".draggable").draggable();
           $("#droppable").droppable({

               drop: function (event, ui) {
                   debugger;
                   var draggableId = ui.draggable.attr("id");
                   var newid = getNewId(draggableId);
                   if (draggableId == "textbox") {
                       $(this).append('<input id="' + newid + '" type="text" />')
                   }
                   else if (draggableId == "chekbox") {
                       $(this).append('<input id="' + newid + '"  type="checkbox" />')
                   }
                   else if (draggableId == "dropdown") {
                       $(this).append('<select   id="' + newid + '"   >' +
                        '<option value="volvo">Volvo</option>' +
                        '<option value="saab">Saab</option>' +
                        '<option value="fiat">Fiat</option>' +
                       ' <option value="audi">Audi</option>' +
                       ' </select>')

                   }

               }
           });
       });

Jaydeep Shah

Спасибо.

и как я могу изменить значение метки (на метке нажмите кнопку изменить текст метки)
моя текущая работа... ( я добавляю функцию EditLabel (), но она не работает)
https://jsfiddle.net/shahjaydeep/tmtfw74q/

Я добрался отсюда...(редактируемые этикетки)
https://www.aspsnippets.com/Articles/Editable-Label-Convert-a-Label-to-TextBox-when-clicked-using-jQuery-in-ASPNet.aspx

Karthik_Mahalingam

вы получаете какую-нибудь ошибку?

Karthik_Mahalingam

проверить это
демонстрация[^]

Karthik_Mahalingam

проверьте приведенную выше ссылку

Jaydeep Shah

да я проверяю
https://plnkr.co/edit/RH6ZA4QakZmnzPah9vpb?p=preview

Jaydeep Shah

ты что-то меняешь?! но в демо - версии также метка щелчка не работает.после перетаскивания в поле.

Karthik_Mahalingam

https://plnkr.co/edit/RH6ZA4QakZmnzPah9vpb?p=preview

Jaydeep Shah

сделано спасибо :)

Karthik_Mahalingam

добро пожаловать

Jaydeep Shah

привет, @karthik

Я пытаюсь добавить флажок. со знаком плюс (но хотите предотвратить ввод ключа)

в то время как отбросьте один флажок теперь отредактируйте метку chechbox и нажмите enter на текстовом поле
теперь обратите внимание еще на одно приложение chechbox... (я хочу prevnet это)

https://plnkr.co/edit/uUozYG7rp0dcMokfE4Vo?p=preview
https://screenshots-да.firefox.com/8lq78TsjwmVZ9EeH/plnkr.co


я использую onclick="appendchkbox(event,this)". для добавления нового чекбокса на plus sing

Karthik_Mahalingam

https://plnkr.co/edit/3xhMwwowodq3cu53vzvH?p=preview

Jaydeep Shah

это не работает ... то же самое поведение, что и раньше.

когда я редактирую метку флажка и нажимаю enter ...новый флажок добавляется.

Karthik_Mahalingam

https://plnkr.co/edit/WLNWh842D4EwOg22UZbM?p=info

Jaydeep Shah

не работает до сих пор на ввод ..новый флажок присоединить (плюс петь нажми пожар)


https://screenshots-да.firefox.com/bNvlv4H4PpPT1AcR/plnkr.co

нажмите на текстовое поле (изменить метку) и введите!

Karthik_Mahalingam

https://plnkr.co/edit/Mtysvhpg1M0A5cZUCzqX?p=preview

Jaydeep Shah

хорошо поработал над этим примером.
но в моем проекте Дизайн другой, я не знаю, почему в моем проекте не работает.

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

Karthik_Mahalingam

Ваше желание,
Если вы опубликуете его как новый вопрос, те,кто знает об этом, могут опубликовать решение.

Jaydeep Shah

Эй Картик,

Я снова вернулся, чтобы принять еще одну помощь.

для всех элементов управления новый идентификатор создается, когда мы перетаскиваем элемент управления в форму, но в моем случае есть значок удаления с каждым текстовым полем.

Итак, предположим, что у меня есть четыре текстовых поля...и я удаляю 3-е
затем добавьте еще одно текстовое поле

затем идентификатор текстового поля дублируется для последнего текстового поля и нового текстового поля

то есть texbox1 , texbox2 ,texbox3 , texbox4
я удаляю texbox3 и добавляю один tetxbox
тогда мое новое удостоверение личности есть ...
texbox1 , texbox2 , textbox4, texbox4....

Итак, как я могу создать уникальный идентификатор или обновить все идентификаторы при удалении или передаче нового элемента управления.

https://screenshots-да.firefox.com/8zwNnLllhTspT7UG/localhost