Drag and drop form-inputs using jquery. How label is fixed after

Question

0.00/5 (No votes)

See more:

I want to create dynamic form controls.

where textbox, radio button can drag and drop in form.

I found drag and drop at here.

[^]

and below link exactly what I required but at here required drag and drop
http://jsfiddle.net/techbrij/uNNMr/

What I have tried:

@{
ViewBag.Title = "draganddrop3";
Layout = null;
}

<h2>draganddrop3</h2>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#box {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}

.draggable {
float: left;
z-index: 99;
}

#droppable {
width: 300px;
height: 500px;
padding: 0.5em;
position: absolute;
left: 33%;
top: 15%;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$(".draggable").draggable();
$("#droppable").droppable({

drop: function (event, ui) {
debugger;
var draggableId = ui.draggable.attr("id");
//every time getfileldId get textbox (how can i get currend draggable id value)
if (ui.draggable.attr("id") == "textbox") {
$(this).append('<input id="Text1" type="text" />')
}
else if (ui.draggable.attr("id") == "chekbox") {
$(this).append('<input id="Checkbox1" type="checkbox" />')
}
else if (ui.draggable.attr("id") == "dropdown") {
$(this).append('<select name="dropdown">' +
'<option value="volvo">Volvo</option>' +
'<option value="saab">Saab</option>' +
'<option value="fiat">Fiat</option>' +
' <option value="audi">Audi</option>' +
' </select>')

}

}
});
});
</script>
</head>
<body>

<div id="" class="">
<ul class="draggable" id="textbox">Textbox</></ul><br />
<ul class="draggable" id="chekbox">chekbox</> </ul><br />
<ul class="draggable" id="dropdown">dropdown</></ul><br />

</div>

<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>

</body>
</html>

Posted 25-Jan-18 19:52pm

Jaydeep Shah

Updated 27-Jan-18 0:44am

v7

Add a Solution

Comments

Karthik_Mahalingam 26-Jan-18 3:02am

what you have tried?
show the code.

Jaydeep Shah 26-Jan-18 3:49am

hey, @Karthik I update my full code here!

currently, the textbox is appended successfully.
but getfileldId alwasy gets "textbox" that's why my other controls are not working.

$("#droppable").droppable({
drop: function (event, ui) {
var getfileldId = $(".draggable").attr("id"); //every time getfileldId get textbox (how can i get currend draggable id value)
if ($(".draggable").attr("id") == "textbox") {
$(this).append('')
}
else if ($(".draggable").attr("id") == "chekbox") {
$(this).append('')
}
else {
//dropdown code.
}
}
});
});

my full code is in the "What I have tried:" section
thanks

Karthik_Mahalingam 26-Jan-18 4:41am

can you post your working code in fiddle?

Jaydeep Shah 26-Jan-18 4:59am

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

I have done drag and drop :)

now I required unique id of every fields control
suppose I drag 3-time textbox then all textbox id must be unique how can I get this?

and how can I save in DB using dynamic form . ?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2018-01-27T00:44:00

Solution 2

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>')

                   }

               }
           });
       });

Posted 27-Jan-18 0:44am

Karthik_Mahalingam

Updated 27-Jan-18 0:45am

Comments

Jaydeep Shah 29-Jan-18 8:41am

Thanks.

and how can I change the label value (on label click label text change)
my current work... ( i add function EditLabel() but it does not work)
https://jsfiddle.net/shahjaydeep/tmtfw74q/

I got from here...(editable label)
https://www.aspsnippets.com/Articles/Editable-Label-Convert-a-Label-to-TextBox-when-clicked-using-jQuery-in-ASPNet.aspx

Karthik_Mahalingam 29-Jan-18 9:06am

are you getting any error?

Karthik_Mahalingam 29-Jan-18 9:09am

check this
demo[^]

Karthik_Mahalingam 29-Jan-18 9:25am

check the above link

Jaydeep Shah 29-Jan-18 9:27am

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

Jaydeep Shah 29-Jan-18 9:29am

are you change something!? but in the demo also label click not work.after dragging in the box.

Karthik_Mahalingam 29-Jan-18 10:15am

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

Jaydeep Shah 30-Jan-18 0:41am

done thanks :)

Karthik_Mahalingam 30-Jan-18 0:46am

welcome

Jaydeep Shah 14-Feb-18 10:16am

hello, @karthik

I am trying to add the checkbox. with plus sign (but want to prevent from enter key)

while drop one checkbox now edit chechbox label and press enter on textbox
now observe one more chechbox append... (i want to prevnet this)

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

i use onclick="appendchkbox(event,this)". for appending new chekbox on plus sing

Karthik_Mahalingam 14-Feb-18 11:07am

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

Jaydeep Shah 14-Feb-18 22:23pm

it's not working ....same behaviour as previous.

when i edit checkbox label and and press enter ...new checkbox append.

Karthik_Mahalingam 15-Feb-18 1:23am

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

Jaydeep Shah 15-Feb-18 1:25am

not working still on enter key ..new checkbox append (plus sing cilck fire)

https://screenshots.firefox.com/bNvlv4H4PpPT1AcR/plnkr.co

click on textbox (edit label) and enter!

Karthik_Mahalingam 15-Feb-18 3:29am

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

Jaydeep Shah 15-Feb-18 9:01am

good working on this example.
but in my project design is different I don't know why in my project not working.

I want to ask you that all question regarding this drag and drop I post here is it ok ! or I post a new post!

Karthik_Mahalingam 15-Feb-18 23:32pm

Your wish,
If you post it as a new question, those who are aware of it,might post the solution.

Jaydeep Shah 12-Mar-18 10:32am

hey Karthik,

I returned again to take one more help.

for all control new id is created when we drag the control in form but in my case, there is delete icon with each textbox.

so suppose I have four textboxes...and I remove 3rd one
then add one more textbox

then textbox id duplicate for last one textbox and new textbox

i.e texbox1 , texbox2 ,texbox3 , texbox4
i remove texbox3 and add one tetxbox
then my new id is ...
texbox1 , texbox2 , textbox4, texbox4....

so how can I create unique id or update all id when deleting or new control passing.

https://screenshots.firefox.com/8zwNnLllhTspT7UG/localhost