Partage
  • Partager sur Facebook
  • Partager sur Twitter

Editer un FormBuilder HTML avec Bootstrap

Sujet résolu
    7 février 2020 à 15:37:59

    Salut à tous!

    Voilà j'ai faits un FormBuilder en HTLM, lorsqu'on édite un champ on arrive sur un modals apparaît montrant le HTML de l' "input" pour savoir le modifier et lui donner le nom qu'on veut.

    Ce que j'essaie de faire c'est qu'au lieu d'avoir le HTML se soit juste un modals qui apparaisse avec au lieu du HTML juste 3 champs permettant de changer le nom, le placeholder et l'id, pour que l'utilisateur est plus facile.

    Je ne cherche pas une solution tout faite car sa serai trop facile haha, donc si vous avez juste des pistes à explorer je suis preneur !

    je vous mets mon code HTML et mon script ainsi qu'une pièce jointe avec le résultat que je recherche

    Je vous dis déjà merci ! :D

    HTML:

    <!doctype html>
     
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title>Créateur de formulaire</title>
    	<link rel="stylesheet" href="css/jquery.ui.theme.css" />
    	<link rel="stylesheet" href="css/bootstrap.css" />
    	<script src="js/jquery.min.js"></script>
    	<script src="js/jquery.ui.min.js"></script>
    	<script src="js/bootstrap.js"></script>
    	<script src="js/beautifyhtml.js"></script>
    	<script src="js/FileSaver.js"></script>
    	<script src="js/FileSaver.min.js"></script>
    	<script src="https://www.google.com/recaptcha/api.js" async defer></script>
    
    	
    </head>
    	
    	<style>
    	.droppable-active { background-color: #E1D9DA; border-radius: 10px; }
    	.tools a { cursor: pointer; font-size: 80%; }
    	.form-body .col-md-6, .form-body .col-md-12 { min-height: 400px; }
    	.draggable{cursor: grab;}
    		
    	</style>
    	
    <body style="background-color: #00000;background-image:url(background/fond-form.jpg); ">
    	<nav style="background-image:url(background/fond-form.jpg);" class="navbar navbar-default navbar-fixed" role="navigation">
    		<div  class="navbar-header">	
    		<a class="navbar-brand" ><h4>Créateur de formulaire</h4></a>
    		</div>
    		<form class="navbar-form navbar-left">
    		<button type="submit" class="btn btn-primary" data-clipboard-text = "testing"
    			id="copy">Copier le HTML</button>
    		</form>
    	</nav>
    	
    	<div style="margin-top: -20px; padding-top:10px">
    	<div class="row">
    		<div class="col-md-3" style="padding: 1px 30px 30px 30px; background-color: #fff; border-radius: 8px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);">
    			<h3>Catégorie</h3>
    				<ul class="nav nav-pills" >
    					<li class="active"><a data-toggle="tab" href="#home">Information personnelle</a></li>
    					
    					<li><a data-toggle="tab" href="#menu1">Sécurité</a></li>
    					<li><a data-toggle="tab" href="#menu2">Information complémentaire</a></li>
    					<li><a data-toggle="tab" href="#menu3">Condition</a></li>
    					
    					<li><a data-toggle="tab" href="#menu4">A propos</a></li>
    				</ul>
    			<div id="hr">
    			<hr>
    			</div>
    			
              	<h3>Élements disponible</h3>
    			
    <!--==========================MENU 1 INFORMATION PERSONNEL==========================================-->
    			<div class="tab-content">
    				<div class="tab-pane active" id="home">
    					<form role="form-home">
    						
    						
    						<div class="form-group draggable">
    							<label for="input-id-name" >Nom</label>
    							<input name="Name" type="text" class="form-control" id="input-id-name" placeholder="Nom">
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-id-surname" >Prénom</label>
    							<input name="Surname" type="text" class="form-control" id="input-id-surname" placeholder="Prénom">
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-id-old" >Age</label>
    							<input name="Old" type="number" class="form-control" id="input-id-old" placeholder="Age">
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-id-email" >Email</label>
    							<input name="Email" type="email" class="form-control" id="input-id-email" placeholder="Entrer votre Email">
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-id-phone" >Numéro de téléphone</label>
    							<input name="Number" type="text" class="form-control" id="input-id-phone" placeholder="numéro de téléphone">
    						</div>
    						
    						
    					</form>
    				</div>
    				
    				
    				
    <!--==========================MENU 2 SECURITE==========================================-->
    				<div class="tab-pane fade" id="menu1">
    					<form role="form-menu1">
    						<div class="form-group draggable">
    							<label for="input-secu-PWD" >Mots de passe</label>
    							<input name="Password" type="password" class="form-control" id="input-secu-PWD" placeholder="mots de passe">
    							<p></p>
    						</div>
    						<div class="form-group draggable">
    							<label for="input-secu-captcha">reCaptcha</label>
    							 <div name="captcha" id="input-secu-captcha" class="g-recaptcha" data-sitekey="http://localhost/navigation/navig.html"></div>
    						</div>
    					</form>
    				</div>
    				
    				
    <!--==========================MENU 3 INFORMATION COMPLEMENTAIRE==========================================-->
    				<div class="tab-pane fade" id="menu2">
    					<form role="form-menu1">
    						<div class="form-group draggable">
    							<label for="input-com-civ">Civilité</label>
    								<select name="civ" class="form-control" id="input-com-civ" placeholder="civilité">
    								  <option placeholder="Civilité">Civilité</option>
    								  <option>Marié(e)</option>
    								  <option>Célibataire</option>
    								  <option>Veuf/Veuve</option>
    								  <option>Séparé(e)</option>
    								  <option>Autre</option>
    								</select>
    					  </div>
    						<div class="form-group draggable">
    							<label for="input-com-soci">Société</label>
    								<input name="soci" type="text" class="form-control" id="input-com-soci" placeholder="Société">
    					  </div>
    
    						<div class="form-group draggable">
    							<label for="input-com-function">Fonction</label>
    								<select name="function" class="form-control" id="input-com-function">
    								  <option>Étudiant</option>
    								  <option>Salarié</option>
    								  <option>Chomeur/employé communal</option>
    								  <option>Buveur de biéres</option>
    								  <option>Entrepreneur</option>
    								  <option>Autres</option>
    								</select>
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-com-object" >Objet</label>
    							<input name="Object" type="text" class="form-control" id="input-com-object" placeholder="Objet de votre demande">
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-com-genre">Genre</label>
    								<select name="genre" class="form-control" id="input-com-genre">
    								  <option>Homme</option>
    								  <option>Femme</option>
    								  <option>Autres</option>
    							</select>
    						</div>
    						
    						
    						
    						<div class="form-group draggable">
    							<label for="input-com-country">Pays</label>
    								<select name="country" class="form-control" id="input-com-country">
    								  	<option value="Afghanistan">Afghanistan </option>
    								  	<option value="Afrique_Centrale">Afrique_Centrale </option>
    									<option value="Afrique_du_sud">Afrique_du_Sud </option>
    									<option value="Albanie">Albanie </option>
    									<option value="Algerie">Algerie </option>
    									<option value="Allemagne">Allemagne </option>
    									<option value="Andorre">Andorre </option>
    									<option value="Angola">Angola </option>
    									<option value="Anguilla">Anguilla </option>
    									<option value="Arabie_Saoudite">Arabie_Saoudite </option>
    									<option value="Argentine">Argentine </option>
    									<option value="Armenie">Armenie </option>
    									<option value="Australie">Australie </option>
    									<option value="Autriche">Autriche </option>
    									<option value="Azerbaidjan">Azerbaidjan </option>
    									<option value="Bahamas">Bahamas </option>
    									<option value="Bangladesh">Bangladesh </option>
    									<option value="Barbade">Barbade </option>
    									<option value="Bahrein">Bahrein </option>
    									<option value="Belgique" selected>Belgique </option>
    									<option value="Belize">Belize </option>
    									<option value="Benin">Benin </option>
    									<option value="Bermudes">Bermudes </option>
    									<option value="Bielorussie">Bielorussie </option>
    									<option value="Bolivie">Bolivie </option>
    									<option value="Botswana">Botswana </option>
    									<option value="Bhoutan">Bhoutan </option>
    									<option value="Boznie_Herzegovine">Boznie_Herzegovine </option>
    									<option value="Bresil">Bresil </option>
    									<option value="Brunei">Brunei </option>
    									<option value="Bulgarie">Bulgarie </option>
    									<option value="Burkina_Faso">Burkina_Faso </option>
    									<option value="Burundi">Burundi </option>
    									<option value="Caiman">Caiman </option>
    									<option value="Cambodge">Cambodge </option>
    									<option value="Cameroun">Cameroun </option>
    									<option value="Canada">Canada </option>
    									<option value="Canaries">Canaries </option>
    									<option value="Cap_vert">Cap_Vert </option>
    									<option value="Chili">Chili </option>
    									<option value="Chine">Chine </option>
    									<option value="Chypre">Chypre </option>
    									<option value="Colombie">Colombie </option>
    									<option value="Comores">Colombie </option>
    									<option value="Congo">Congo </option>
    									<option value="Congo_democratique">Congo_democratique </option>
    									<option value="Cook">Cook </option>
    									<option value="Coree_du_Nord">Coree_du_Nord </option>
    									<option value="Coree_du_Sud">Coree_du_Sud </option>
    									<option value="Costa_Rica">Costa_Rica </option>
    									<option value="Cote_d_Ivoire">Côte_d_Ivoire </option>
    									<option value="Croatie">Croatie </option>
    									<option value="Cuba">Cuba </option>
    									<option value="Danemark">Danemark </option>
    									<option value="Djibouti">Djibouti </option>
    									<option value="Dominique">Dominique </option>
    									<option value="Egypte">Egypte </option>
    									<option value="Emirats_Arabes_Unis">Emirats_Arabes_Unis </option>
    									<option value="Equateur">Equateur </option>
    									<option value="Erythree">Erythree </option>
    									<option value="Espagne">Espagne </option>
    									<option value="Estonie">Estonie </option>
    									<option value="Etats_Unis">Etats_Unis </option>
    									<option value="Ethiopie">Ethiopie </option>
    									<option value="Falkland">Falkland </option>
    									<option value="Feroe">Feroe </option>
    									<option value="Fidji">Fidji </option>
    									<option value="Finlande">Finlande </option>
    									<option value="France">France </option>
    									<option value="Gabon">Gabon </option>
    									<option value="Gambie">Gambie </option>
    									<option value="Georgie">Georgie </option>
    									<option value="Ghana">Ghana </option>
    									<option value="Gibraltar">Gibraltar </option>
    									<option value="Grece">Grece </option>
    									<option value="Grenade">Grenade </option>
    									<option value="Groenland">Groenland </option>
    									<option value="Guadeloupe">Guadeloupe </option>
    									<option value="Guam">Guam </option>
    									<option value="Guatemala">Guatemala</option>
    									<option value="Guernesey">Guernesey </option>
    									<option value="Guinee">Guinee </option>
    									<option value="Guinee_Bissau">Guinee_Bissau </option>
    									<option value="Guinee equatoriale">Guinee_Equatoriale </option>
    									<option value="Guyana">Guyana </option>
    									<option value="Guyane_Francaise ">Guyane_Francaise </option>
    									<option value="Haiti">Haiti </option>
    									<option value="Hawaii">Hawaii </option>
    									<option value="Honduras">Honduras </option>
    									<option value="Hong_Kong">Hong_Kong </option>
    									<option value="Hongrie">Hongrie </option>
    									<option value="Inde">Inde </option>
    									<option value="Indonesie">Indonesie </option>
    									<option value="Iran">Iran </option>
    									<option value="Iraq">Iraq </option>
    									<option value="Irlande">Irlande </option>
    									<option value="Islande">Islande </option>
    									<option value="Israel">Israel </option>
    									<option value="Italie">italie </option>
    									<option value="Jamaique">Jamaique </option>
    									<option value="Jan Mayen">Jan Mayen </option>
    									<option value="Japon">Japon </option>
    									<option value="Jersey">Jersey </option>
    									<option value="Jordanie">Jordanie </option>
    									<option value="Kazakhstan">Kazakhstan </option>
    									<option value="Kenya">Kenya </option>
    									<option value="Kirghizstan">Kirghizistan </option>
    									<option value="Kiribati">Kiribati </option>
    									<option value="Koweit">Koweit </option>
    									<option value="Laos">Laos </option>
    									<option value="Lesotho">Lesotho </option>
    									<option value="Lettonie">Lettonie </option>
    									<option value="Liban">Liban </option>
    									<option value="Liberia">Liberia </option>
    									<option value="Liechtenstein">Liechtenstein </option>
    									<option value="Lituanie">Lituanie </option>
    									<option value="Luxembourg">Luxembourg </option>
    									<option value="Lybie">Lybie </option>
    									<option value="Macao">Macao </option>
    									<option value="Macedoine">Macedoine </option>
    									<option value="Madagascar">Madagascar </option>
    									<option value="Madère">Madère </option>
    									<option value="Malaisie">Malaisie </option>
    									<option value="Malawi">Malawi </option>
    									<option value="Maldives">Maldives </option>
    									<option value="Mali">Mali </option>
    									<option value="Malte">Malte </option>
    									<option value="Man">Man </option>
    									<option value="Mariannes du Nord">Mariannes du Nord </option>
    									<option value="Maroc">Maroc </option>
    									<option value="Marshall">Marshall </option>
    									<option value="Martinique">Martinique </option>
    									<option value="Maurice">Maurice </option>
    									<option value="Mauritanie">Mauritanie </option>
    									<option value="Mayotte">Mayotte </option>
    									<option value="Mexique">Mexique </option>
    									<option value="Micronesie">Micronesie </option>
    									<option value="Midway">Midway </option>
    									<option value="Moldavie">Moldavie </option>
    									<option value="Monaco">Monaco </option>
    									<option value="Mongolie">Mongolie </option>
    									<option value="Montserrat">Montserrat </option>
    									<option value="Mozambique">Mozambique </option>
    									<option value="Namibie">Namibie </option>
    									<option value="Nauru">Nauru </option>
    									<option value="Nepal">Nepal </option>
    									<option value="Nicaragua">Nicaragua </option>
    									<option value="Niger">Niger </option>
    									<option value="Nigeria">Nigeria </option>
    									<option value="Niue">Niue </option>
    									<option value="Norfolk">Norfolk </option>
    									<option value="Norvege">Norvege </option>
    									<option value="Nouvelle_Caledonie">Nouvelle_Caledonie </option>
    									<option value="Nouvelle_Zelande">Nouvelle_Zelande </option>
    									<option value="Oman">Oman </option>
    									<option value="Ouganda">Ouganda </option>
    									<option value="Ouzbekistan">Ouzbekistan </option>
    									<option value="Pakistan">Pakistan </option>
    									<option value="Palau">Palau </option>
    									<option value="Palestine">Palestine </option>
    									<option value="Panama">Panama </option>
    									<option value="Papouasie_Nouvelle_Guinee">Papouasie_Nouvelle_Guinee </option>
    									<option value="Paraguay">Paraguay </option>
    									<option value="Pays_Bas">Pays_Bas </option>
    									<option value="Perou">Perou </option>
    									<option value="Philippines">Philippines </option>
    									<option value="Pologne">Pologne </option>
    									<option value="Polynesie">Polynesie </option>
    									<option value="Porto_Rico">Porto_Rico </option>
    									<option value="Portugal">Portugal </option>
    									<option value="Qatar">Qatar </option>
    									<option value="Republique_Dominicaine">Republique_Dominicaine </option>
    									<option value="Republique_Tcheque">Republique_Tcheque </option>
    									<option value="Reunion">Reunion </option>
    									<option value="Roumanie">Roumanie </option>
    									<option value="Royaume_Uni">Royaume_Uni </option>
    									<option value="Russie">Russie </option>
    									<option value="Rwanda">Rwanda </option>
    									<option value="Sahara Occidental">Sahara Occidental </option>
    									<option value="Sainte_Lucie">Sainte_Lucie </option>
    									<option value="Saint_Marin">Saint_Marin </option>
    									<option value="Salomon">Salomon </option>
    									<option value="Salvador">Salvador </option>
    									<option value="Samoa_Occidentales">Samoa_Occidentales</option>
    									<option value="Samoa_Americaine">Samoa_Americaine </option>
    									<option value="Sao_Tome_et_Principe">Sao_Tome_et_Principe </option>
    									<option value="Senegal">Senegal </option>
    									<option value="Seychelles">Seychelles </option>
    									<option value="Sierra Leone">Sierra Leone </option>
    									<option value="Singapour">Singapour </option>
    									<option value="Slovaquie">Slovaquie </option>
    									<option value="Slovenie">Slovenie</option>
    									<option value="Somalie">Somalie </option>
    									<option value="Soudan">Soudan </option>
    									<option value="Sri_Lanka">Sri_Lanka </option>
    									<option value="Suede">Suede </option>
    									<option value="Suisse">Suisse </option>
    									<option value="Surinam">Surinam </option>
    									<option value="Swaziland">Swaziland </option>
    									<option value="Syrie">Syrie </option>
    									<option value="Tadjikistan">Tadjikistan </option>
    									<option value="Taiwan">Taiwan </option>
    									<option value="Tonga">Tonga </option>
    									<option value="Tanzanie">Tanzanie </option>
    									<option value="Tchad">Tchad </option>
    									<option value="Thailande">Thailande </option>
    									<option value="Tibet">Tibet </option>
    									<option value="Timor_Oriental">Timor_Oriental </option>
    									<option value="Togo">Togo </option>
    									<option value="Trinite_et_Tobago">Trinite_et_Tobago </option>
    									<option value="Tristan da cunha">Tristan de cuncha </option>
    									<option value="Tunisie">Tunisie </option>
    									<option value="Turkmenistan">Turmenistan </option>
    									<option value="Turquie">Turquie </option>
    									<option value="Ukraine">Ukraine </option>
    									<option value="Uruguay">Uruguay </option>
    									<option value="Vanuatu">Vanuatu </option>
    									<option value="Vatican">Vatican </option>
    									<option value="Venezuela">Venezuela </option>
    									<option value="Vierges_Americaines">Vierges_Americaines </option>
    									<option value="Vierges_Britanniques">Vierges_Britanniques </option>
    									<option value="Vietnam">Vietnam </option>
    									<option value="Wake">Wake </option>
    									<option value="Wallis et Futuma">Wallis et Futuma </option>
    									<option value="Yemen">Yemen </option>
    									<option value="Yougoslavie">Yougoslavie </option>
    									<option value="Zambie">Zambie </option>
    									<option value="Zimbabwe">Zimbabwe </option>
    									
    							</select>
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-com-hob" >Hobbies</label>
    							<textarea name="text_area_fixed" type="textarea" class="form-control" id="input-com-hob"></textarea>
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-com-PJ">Piéce jointe</label>
    							<input name="PJ" type="file"  id="input-com-PJ" class="form-control" hidden="">
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-com-adresse">adresse</label>
    							<input name="adresse" type="text"  id="input-com-adresse" class="form-control" placeholder="ex: Rue du miroir">
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-com-n">N°</label>
    							<input name="N" type="text"  id="input-com-n" class="form-control" placeholder="ex: 69">
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-com-CP">Code postal</label>
    							<input name="CP" type="text"  id="input-com-CP" class="form-control" placeholder="ex: 4000">
    						</div>
    						
    						<!--Partie E-shop-->
    						
    						<div class="form-group draggable">
    							<label for="input-com-MP">Mode de payement</label><br>
    							 	<label class="radio-inline"><input type="radio" name="optradio">MasterCard</label>
    								<label class="radio-inline"><input type="radio" name="optradio">Visa</label>
    								<label class="radio-inline"><input type="radio" name="optradio">Maestro</label> 
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-com-NC">Numéro de carte</label><br>
    							 	<input name="NC" type="text" id="input-com-NC" class="form-control" placeholder="ex:000000000"> 
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-com-CVV" >CVV</label>
    							<input name="cvv" type="password" class="form-control" id="input-com-CVV" placeholder="Laisser vide si Maestro">
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-com-lg" >Langue parlé</label>
    							<input name="language" type="text" class="form-control" id="input-com-lg" placeholder="langue parlé">
    						</div>
    					</form>
    				</div>
    				
    <!--============================MENU 4 CONDITION=========================-->
    				
    				<div class="tab-pane fade" id="menu3">
    					<form role="form-menu1">
    						<div class="form-group draggable">
    						  <label><input type="checkbox" value=""> J'ai lu et j'accepte les CGU</label>
    					  	  <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">
    							  CGU
    						  </button>
    
    							<!-- Modal -->
    							<div class="modal fade" id="input-cond-CGU" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    							  <div class="modal-dialog" role="document">
    								<div class="modal-content">
    								  <div class="modal-header">
    									<h5 class="modal-title" id="input-cond-CGU-modal">CGU</h5>
    								  </div>
    								  <div class="modal-body">
    									
    									  <h5>1. Qui peut utiliser les Services ?</h5><br>
    
    										Vous ne pourrez utiliser les Services que si vous acceptez de signer un contrat vous liant à Twitter et que si vous n’êtes pas interdit(e) de recevoir ce type de services en vertu des lois du pays ou territoire dont vous relevez. Dans tous les cas, pour utiliser les Services, vous devez être âgé d'au moins 13 ans, ou dans le cas de Periscope de 16 ans. Si vous acceptez les présentes Conditions et que vous utilisez les Services au nom d’une société, organisation, État ou autre entité juridique, vous déclarez et garantissez que vous êtes autorisé(e) à le faire et que vous avez l'autorité de lier cette entité aux présentes Conditions, auquel cas les mots "vous" et "votre" tels qu'ils sont utilisés dans les présentes Conditions se réfèrent à cette entité.
    									  <br>
    
    									  <h5>2. Confidentialité</h5><br>
    
    										Notre Politique de confidentialité (https://www.twitter.com/privacy) décrit comment nous traitons les informations que vous nous fournissez lorsque vous utilisez nos Services. Vous reconnaissez qu’en utilisant les Services, vous consentez à ce que nous collections et utilisions (selon les termes de la Politique de confidentialité) ces informations, y compris dans les cas où ces informations seraient transférées aux États-Unis, en Irlande et/ou dans d’autres pays aux fins d’être stockées, traitées ou utilisées par Twitter ou ses sociétés affiliées.
    									  <br>
    
    										<h5>3. Contenu des Services</h5><br>
    
    										Vous êtes responsable de l’utilisation que vous faites des Services et de tout Contenu que vous fournissez, y compris de la conformité aux lois, règles et réglementations en vigueur. Vous ne devez fournir un Contenu que dans la mesure où cela ne vous gêne pas de le partager avec d’autres.<br>
    
    										Tout usage ou recours à un Contenu ou à des matériaux affichés par l’intermédiaire des Services, ou que vous obtenez par ce moyen, est réalisé à vos risques et périls. Nous n’approuvons, ne soutenons, ne déclarons et ne garantissons pas l’exhaustivité, la véracité, l’exactitude ou la fiabilité d’un quelconque Contenu ou d’une quelconque information publiée via les Services, ni ne cautionnons aucune des opinions exprimées par leur intermédiaire. Vous comprenez qu’en utilisant les Services, vous risquez d’être exposé(e) à un Contenu qui peut être offensant, malfaisant, inexact ou inapproprié, voire, dans certains cas, à des messages qui auraient été mal adressés ou qui s’avèreraient trompeurs. Tout Contenu relève de la seule responsabilité de la personne qui l’a créé. Nous ne surveillons et ne contrôlons pas nécessairement tous les Contenus publiés via les Services, et nous ne pouvons en assumer la responsabilité.<br>
    
    										Nous nous réservons le droit de supprimer tout Contenu qui violerait l’Accord d’utilisation, parce qu’il constituerait – par exemple - une violation de droits d’auteur ou de marques de commerce ou tout autre détournement de la propriété intellectuelle, une appropriation illicite de droits de propriété intellectuelle, une usurpation d’identité, une conduite illicite ou un harcèlement. Notre Centre d’assistance fournit des informations sur les politiques spécifiques et la procédure destinée à signaler ou à contester lesdites violations (https://help.twitter.com/en/rules-and-policies/twitter-report-violation#specific-violations et https://help.twitter.com/en/managing-your-account/suspended-twitter-accounts).<br>
    
    										Si vous estimez que votre Contenu a été copié d’une manière constituant une contrefaçon de droits d’auteur, veuillez le signaler en remplissant notre Formulaire de signalement d’une contrefaçon de droits d’auteur (https://help.twitter.com/forms/dmca) ou en contactant notre agent chargé des droits d’auteur à l’adresse suivante :<br>
    
    										Twitter, Inc.<br>
    										Attn: Copyright Agent<br>
    										1355 Market Street, Suite 900<br>
    										San Francisco, CA 94103<br>
    										Signalements: https://help.twitter.com/forms/dmca<br>
    										E-mail: copyright@twitter.com<br>
    										(pour le contenu sur Twitter)<br><br>
    
    										Twitter, Inc.<br>
    										Attn: Copyright Agent - Periscope<br>
    										1355 Market Street, Suite 900<br>
    										San Francisco, CA 94103<br>
    										Signalements: https://help.twitter.com/forms/dmca<br>
    										Email: copyright@pscp.tv<br>
    										(pour le contenu sur Periscope)<br>
    										Vos droits et Concession de droits sur le Contenu<br><br>
    
    										Vous conservez vos droits sur tout Contenu que vous soumettez, publiez ou affichez sur ou via les Services. Ce qui est à vous vous appartient. Vous êtes le propriétaire de votre Contenu (ce qui inclut vos sons, photos et vidéos intégrés).<br>
    
    										En soumettant, en publiant ou en affichant un Contenu sur ou via les Services, vous nous accordez une licence mondiale, non exclusive et libre de redevances (incluant le droit de sous-licencier), nous autorisant à utiliser, copier, reproduire, traiter, adapter, modifier, publier, transmettre, afficher et distribuer ce Contenu sur tout support et selon toute méthode de distribution actuellement connus ou développés dans le futur (dans un souci de clarté, ces droits comprennent, par exemple, ceux de conservation, transformation et traduction). Cette licence nous autorise à mettre votre Contenu à disposition du reste du monde et autorise les autres à en faire de même. Vous convenez que cette licence comprend le droit pour Twitter de fournir, promouvoir et améliorer les Services et de mettre le Contenu soumis sur ou via les Services à disposition d’autres sociétés, organisations ou personnes privées, aux fins de syndication, diffusion, distribution, Retweet, promotion ou publication de ce Contenu sur d’autres supports et services, sous réserve de respecter nos conditions régissant l’utilisation de ce Contenu. Twitter, ou ces autres sociétés, organisations ou personnes privées, pourront utiliser ainsi le Contenu que vous aurez soumis, publié, transmis ou de quelque autre façon mis à disposition via les Services sans que vous puissiez prétendre à une quelconque rémunération au titre de ce Contenu, étant donné qu’il est convenu par les présentes que votre utilisation des Services vaut pour rémunération suffisante du Contenu et octroi des droits cités dans la présente disposition.<br>
    
    										Twitter a un ensemble évolutif de règles régissant la façon dont les partenaires de l’écosystème peuvent interagir avec votre Contenu sur les Services. Ces règles existent afin de permettre un écosystème ouvert tenant compte de vos droits. Vous comprenez que nous sommes susceptibles de modifier ou d’adapter votre Contenu lorsque nous ou nos partenaires le distribuons, le syndiquons, le publions ou le diffusons, et/ou d’apporter des modifications à votre Contenu afin de l’adapter à différents supports.<br>
    
    										Vous déclarez et garantissez que vous avez, ou avez obtenu, tous les droits, licences, consentements, autorisations, le pouvoir et/ou l’autorité nécessaires pour accorder les droits concédés aux termes des présentes pour tout Contenu que vous soumettez, postez ou affichez sur ou par le biais des Services. Vous acceptez que ce Contenu ne contienne pas d'éléments soumis au droit d'auteur ou d'autres droits de propriété, à moins que vous n'ayez l'autorisation nécessaire ou que vous ayez légalement le droit de publier les éléments et d'accorder à Twitter la licence décrite ci-dessus.<br>
    
    									  <h5>4. Utilisation des Services</h5><br>
    
    										Nous vous invitons à prendre connaissance des Règles et politiques de Twitter (et, pour Periscope, du Guide de la Communauté Periscope sur https://www.pscp.tv/content), qui font partie intégrante du Contrat d’utilisation et qui définissent ce qui est interdit dans le cadre des Services. Vous ne pouvez utiliser les Services qu’à la condition de respecter les présentes Conditions et toutes les lois, règles et réglementations en vigueur.<br>
    
    										Nos Services évoluent en permanence. À ce titre, les Services sont susceptibles d’être modifiés occasionnellement, à notre entière discrétion. Nous sommes susceptibles de cesser (provisoirement ou définitivement) de vous fournir, à vous ou plus généralement aux utilisateurs, les Services ou toute fonctionnalité de ceux-ci. Nous nous réservons par ailleurs le droit de fixer des limites d’utilisation et de stockage, à tout moment et à notre seule discrétion. Nous sommes également susceptibles de retirer ou de refuser de distribuer un quelconque Contenu sur les Services, de restreindre la distribution ou la visibilité de tout Contenu sur le service ou de suspendre ou résilier un utilisateur et de récupérer des noms d’utilisateurs, sans encourir aucune responsabilité à votre égard.<br>
    
    										En contrepartie du droit à accéder et à utiliser les Services qui vous est consenti par Twitter, vous acceptez que Twitter et ses prestataires et partenaires tiers puissent placer des publicités sur les Services, ou en relation avec l’affichage du Contenu ou des informations provenant des Services et soumis par vous ou par d’autres. Vous vous engagez également à ne pas faire un usage impropre de nos Services, par exemple à ne pas les perturber ni à essayer d’y accéder par le biais d’une méthode autre que l’interface et les instructions que nous fournissons. Lorsque vous accédez aux Services ou que vous les utilisez, vous ne pouvez effectuer aucune des actions suivantes : (i) accéder à, trafiquer ou utiliser des zones non publiques des Services, des systèmes informatiques de Twitter ou des systèmes techniques de distribution utilisés par les prestataires de Twitter ; (ii) sonder, explorer ou tester la vulnérabilité d’un quelconque système ou réseau, ou violer ou contourner de quelconques mesures de sécurité ou d’authentification ; (iii) rechercher les Services, y accéder, ou tenter de les rechercher ou d’y accéder par tout moyen (automatisé ou non) autre que les interfaces actuellement disponibles, développées et fournies par Twitter (sous réserve de respecter les conditions générales en vigueur), à moins que vous n’y ayez été expressément autorisé(e) aux termes d’un accord séparé avec Twitter (NOTE : le crawling [indexation systématique] des Services est autorisé si cela est fait conformément aux dispositions du fichier robots.txt ; par contre, le scraping [extraction à des fins d’exploitation] des Services sans l’accord préalable de Twitter est expressément interdit) ; (iv) falsifier un quelconque en-tête de paquet TCP/IP ou toute partie des informations de l’en-tête d’un quelconque e-mail ou post, ou, de quelque autre façon, utiliser les Services pour envoyer des identifiants de source altérés, trompeurs ou faux ; (v) entraver ou perturber (ou tenter de le faire) l’accès d’un quelconque utilisateur, hôte ou réseau, aux Services, notamment et entre autres, par envoi de virus, overloading [surcharge], flooding [engorgement], spamming [pollupostage], mailbombing [bombardement de courrier], ou par l’exécution de scripts de création de Contenu de manière à perturber ou à saturer les Services. Nous nous réservons également le droit de consulter, de lire, de conserver et de divulguer toute information dans la mesure où nous l’estimons nécessaire aux fins de : (i) satisfaire à toute obligation légale ou réglementaire, procédure juridique ou demande administrative applicable ; (ii) faire respecter les Conditions, y compris en facilitant les investigations sur les éventuelles violations des présentes ; (iii) détecter, prévenir ou de quelque autre façon traiter tout problème de nature frauduleuse, sécuritaire ou technique ; (iv) répondre aux demandes d’assistance des utilisateurs ; (v) protéger les droits, les biens et la sécurité de Twitter, de ses utilisateurs et du public. Twitter ne divulgue aucune donnée personnelle à des tierces parties, à moins que notre politique de confidentialité ne le permette (https://twitter.com/privacy).<br>
    
    										Si vous utilisez des fonctionnalités développeur des Services, notamment Twitter for Websites (https://dev.twitter.com/web/overview), Twitter Cards (https://dev.twitter.com/cards/overview), Public API (https://dev.twitter.com/streaming/public), ou Sign in with Twitter (https://dev.twitter.com/web/sign-in), vous acceptez les termes de notre Accord développeurs (https://dev.twitter.com/fr/overview/terms/agreement) et de notre Politique développeurs (https://dev.twitter.com/fr/overview/terms/policy). Si vous voulez reproduire, modifier, créer des œuvres dérivées, distribuer, vendre, transférer, afficher publiquement, exécuter publiquement, transmettre ou de quelque autre façon utiliser les Services ou le Contenu disponible sur les Services, vous devrez utiliser les interfaces et les instructions que nous fournissons, sauf dans la mesure autorisée par les Services de Twitter, par les présentes Conditions ou par les conditions figurant sur dev.twitter.com. Si vous êtes chercheur en sécurité informatique, vous êtes tenus de respecter les règles du Programme de Signalement de la Vulnérabilité de Twitter (https://hackerone.com/twitter). Les exigences énoncées au paragraphe précédent peuvent ne pas s’appliquer aux participants au Programme de Signalement de la Vulnérabilité de Twitter.<br>
    
    										Si vous utilisez les fonctionnalités publicitaires des Services, vous devez accepter notre Accord-cadre de services Twitter (https://ads.twitter.com/terms).<br>
    
    										Si vous utilisez des Super Cœurs, Pièces ou Étoiles sur Periscope, vous êtes tenus d’accepter nos Conditions Super Cœurs (https://legal.twitter.com/periscope/super/terms.html).<br>
    									  
    										Votre Compte<br>
    
    										Vous devrez peut-être créer un compte pour utiliser certains de nos Services. Vous êtes responsable de la protection de votre compte ; nous vous invitons donc à utiliser un mot de passe fort et à limiter son utilisation à ce compte. Nous déclinons toute responsabilité en cas de perte ou de préjudice qui découlerait du non-respect par vous de ce qui précède.<br>
    
    										Vous pouvez contrôler la plupart des communications émanant des Services. Nous pourrons être amenés à vous communiquer un certain nombre d’informations, telles que des annonces de services et des messages administratifs. Ces communications sont considérées comme faisant partie des Services et de votre compte, et vous n’aurez pas forcément l’option de choisir de ne pas les recevoir. Si vous avez associé votre numéro de téléphone à votre compte et que vous modifiez ou désactiviez ensuite ce numéro de téléphone, vous devrez mettre à jour les informations de votre compte, de sorte que nous n’adressions aucun message au nouveau propriétaire de votre ancien numéro.
    									  <br>
    										Votre licence d’utilisation des Services<br>
    
    										Twitter vous accorde une licence personnelle, mondiale, libre de redevances, non cessible et non exclusive vous autorisant à utiliser le logiciel qui vous est fourni dans le cadre des Services. Cette licence a pour seul but de vous permettre d’utiliser et de jouir des Services fournis par Twitter conformément aux présentes Conditions.<br>
    
    										Les Services sont protégés par des lois relatives aux droits d’auteur et aux marques commerciales, et par d’autres lois en vigueur aux États-Unis et dans les autres pays. Aucune disposition des présentes Conditions ne saurait vous donner le droit d’utiliser le nom de Twitter, ni les marques commerciales, logos, noms de domaine, autres attributs distinctifs et droits exclusifs de la marque Twitter. Tout droit, titre et intérêt afférents aux Services (à l’exception du Contenu fourni par les utilisateurs) est et restera la propriété exclusive de Twitter et de ses licenciés. Tout commentaire ou suggestion que vous pourriez faire au sujet de Twitter ou des Services est entièrement volontaire, et nous serons libres d’utiliser ces commentaires ou suggestions comme bon nous semblera et sans être tenus à aucune obligation à votre égard.<br>
    									  
    										Résiliation des présentes Conditions<br>
    
    										Vous pourrez mettre fin à votre accord légal avec Twitter à tout moment en désactivant vos comptes et en cessant d’utiliser ses Services. Pour désactiver votre compte, veuillez suivre les instructions figurant sur https://help.twitter.com/managing-your-account/how-to-deactivate-twitter-account (et pour Periscope sur https://help.pscp.tv/customer/portal/articles/2460220). Si vous souhaitez savoir ce qu’il advient de vos informations, veuillez consulter notre Politique de confidentialité.<br>
    
    										Nous pouvons suspendre ou résilier votre compte, ou cesser de vous fournir l’ensemble ou une partie des Services, à tout moment, pour un quelconque motif ou sans motif, notamment si nous avons des raisons de penser que : i) vous avez violé les présentes Conditions ou les Règles et politiques de Twitter ou le Guide de la Communauté Periscope (https://www.pscp.tv/content); ii) vous créez un risque pour nous ou vous nous exposez à d’éventuelles poursuites judiciaires ; iii) votre compte doit être supprimé en raison d’une conduite illicite ; iv) votre compte doit être supprimé pour absence d’activité prolongée ; ou v) notre prestation de Services à votre intention n’est plus commercialement viable. Nous nous efforcerons, dans la mesure du raisonnable et selon les circonstances, de vous le notifier à l’adresse e-mail associée à votre compte ou lors de votre prochaine tentative de connexion à votre compte. En tout état de cause, les présentes Conditions prendront fin, ainsi que, entre autres, votre licence d’utilisation des Services, à l’exception des dispositions suivantes qui continueront de s’appliquer : II, III, V et VI. Afin d'éviter tout doute, ces conditions survivent à la désactivation ou à la résiliation de votre compte. Si vous estimez que votre compte a été résilié par erreur, vous pouvez faire appel en suivant les instructions de notre Centre d’assistance (https://help.twitter.com/forms/general?subtopic=suspended). Afin de lever toute ambiguïté, les présentes Conditions survivront à la désactivation ou à la résiliation de votre compte.<br>
    
    										<h5>5. Avertissements et Limitation de Responsabilité
    										Les Services vous sont fournis « EN L’ÉTAT »</h5><br>
    
    										Si vous résidez en dehors de l’Union européenne ou de l’Espace Economique Européen, vous convenez que votre accès aux Services ou à tout Contenu ainsi que leur utilisation sont à vos propres risques et périls. Vous comprenez et convenez que les Services vous sont fournis « EN L’ÉTAT » et « SELON LES DISPONIBILITÉS ». Les « Entités Twitter » désignent Twitter, ses sociétés parentes, filiales, sociétés associées, responsables, administrateurs, employés, agents, représentants, partenaires et donneurs de licence. Sans limiter la portée de ce qui précède et dans toute la mesure autorisée par la loi applicable, LES ENTITÉS TWITTER DÉCLINENT TOUTE GARANTIE OU CONDITION, EXPRESSE OU IMPLICITE, EN CE QUI CONCERNE LA QUALITÉ MARCHANDE, L’ADÉQUATION À UN USAGE SPÉCIFIQUE ET LA NON-VIOLATION DE DROITS DE TIERS. Les Entités Twitter ne sauraient garantir ou faire valoir, et déclinent toute responsabilité et obligation en ce qui concerne : (i) l’exhaustivité, l'exactitude, la disponibilité, le caractère opportun, la sécurité ou la fiabilité des Services ou de quelque Contenu que ce soit ; (ii) tout dommage subi par votre système informatique, toute perte de données ou tout autre dommage découlant de votre accès aux Services ou à tout Contenu et de leur utilisation ; (iii) la suppression de tout Contenu ou toutes autres communications conservées par les Services ou l’incapacité à les stocker ou à les transmettre ; et (iv) l’adéquation des Services à vos besoins ou leur disponibilité ininterrompue, sécurisée et sans erreur. Aucun avis ni information, sous forme orale ou écrite, obtenu de la part des Entités Twitter ou par l’intermédiaire des Services, ne saurait créer une quelconque garantie ou affirmation ne figurant pas expressément aux présentes.
    										Limitation de Responsabilité<br>
    
    										Si vous résidez en dehors de l’Union européenne ou de l’Espace Economique Européen, VOUS CONVENEZ QUE DANS TOUTE LA MESURE AUTORISÉE PAR LA LOI EN VIGUEUR, LES ENTITÉS TWITTER NE SERONT TENUES RESPONSABLES D’AUCUNS DOMMAGES ET INTÉRÊTS INDIRECTS, ACCESSOIRES, SPÉCIAUX, CONSÉCUTIFS OU PUNITIFS, NI D’AUCUNE PERTE DE PROFITS OU DE REVENUS, SUBIE DIRECTEMENT OU INDIRECTEMENT, NI D’AUCUNE PERTE DE DONNÉES, D’USAGE, DE CLIENTÈLE, NI D’AUTRES PERTES INTANGIBLES, DÉCOULANT DE (i) VOTRE ACCÈS, UTILISATION OU INCAPACITÉ D’ACCÉDER OU D'UTILISER LES SERVICES ; (ii) TOUTE CONDUITE OU CONTENU D’UN TIERS DANS LE CADRE DES SERVICES, INCLUANT NOTAMMENT, TOUTE CONDUITE DIFFAMATOIRE, OFFENSANTE OU ILLICITE DE LA PART D’AUTRES UTILISATEURS OU DE TIERS ; (iii) TOUT CONTENU OBTENU DES SERVICES ; OU (iv) DE L’ACCÈS NON AUTORISE, L’UTILISATION OU L’ALTÉRATION DE VOS TRANSMISSIONS OU DE VOTRE CONTENU. LA RESPONSABILITÉ CUMULÉE DES ENTITÉS TWITTER NE DÉPASSERA EN AUCUN CAS CENT DOLLARS AMÉRICAINS (100,00 USD) OU LE MONTANT QUE VOUS AUREZ PAYÉ À TWITTER, LE CAS ÉCHÉANT, AU COURS DES SIX DERNIERS MOIS POUR LES SERVICES DONNANT LIEU À LA PLAINTE, LE MONTANT LE PLUS ÉLEVÉ FAISANT FOI. LES RESTRICTIONS DE LA PRÉSENTE SOUS-SECTION S’APPLIQUERONT À TOUTE BASE DE RESPONSABILITÉ, QU’ELLE SOIT FONDÉE SUR LA GARANTIE, LE CONTRAT, LE TEXTE LÉGISLATIF, LE DÉLIT CIVIL (Y COMPRIS LA NÉGLIGENCE) OU AUTRE, ET QUE LES ENTITÉS TWITTER AIENT ÉTÉ INFORMÉES OU NON DE LA POSSIBILITÉ D’UN TEL DOMMAGE, ET MÊME S’IL S’AVÈRE QU’UN RECOURS PRÉVU AUX PRÉSENTES N’A PAS REMPLI SA FINALITÉ ESSENTIELLE.<br>
    
    										Si vous résidez dans l’Union européenne ou l’Espace Economique Européen, vous convenez qu’en utilisant les Services, la responsabilité de Twitter, ses sociétés parentes, entités affiliées, sociétés associées, responsables, administrateurs, employés, agents, représentants, partenaires et donneurs de licence est limitée dans la mesure maximale autorisée dans votre pays de résidence.<br>
    
    										<h5>6. Dispositions générales</h5><br>
    
    										Nous serons susceptibles de modifier les présentes Conditions à tout moment. Ces modifications ne seront pas rétroactives et notre relation mutuelle sera en tout état de cause régie par la version la plus récente des présentes Conditions que vous pourrez consulter à tout moment sur twitter.com/tos. À l’exception des changements liés à de nouvelles fonctions ou effectués pour des raisons juridiques, nous vous alerterons 30 jours avant que des modifications influant sur les droits ou obligations d’une quelconque partie aux présentes Conditions ne soient apportées à ces dernières. Cette alerte sera réalisée, par exemple, par une notification du Service ou un e-mail adressé à l’adresse électronique associée à votre compte. En continuant d’accéder aux Services ou en les utilisant après l’entrée en vigueur de ces modifications, vous accepterez d’être lié(e) par les présentes Conditions.<br>
    
    										Si vous résidez en dehors de l’Union européenne ou de l’Espace Economique Européen, les lois de l’État de Californie, à l'exclusion de ses dispositions sur le choix de la législation applicable, régiront les présentes Conditions et tout litige survenant entre vous et Twitter. Tous les litiges relatifs aux présentes Conditions ou aux Services seront portés exclusivement devant les tribunaux fédéraux ou d’État situés dans le Comté de San Francisco de Californie aux États-Unis, et vous acceptez de vous soumettre à la compétence personnelle et renoncez à toute objection pour cause de forum inopportun.<br>
    
    										Si vous êtes une entité gouvernementale fédérale, d’État ou locale aux États-Unis utilisant les Services en votre qualité officielle et légalement dans l’incapacité d’accepter les clauses ci-dessus concernant la législation, la juridiction ou le tribunal compétent, lesdites clauses ne vous concernent pas. Pour de telles entités du gouvernement fédéral des États-Unis, les présentes Conditions et toute action connexe s’y rapportant seront régies par les lois des États-Unis d’Amérique (sans référence aux conflits de droit) et, en l’absence de loi fédérale et dans la mesure autorisée par la loi fédérale, par les lois de l’État de Californie (à l'exclusion du choix de la loi applicable).<br>
    
    										Dans l’éventualité où une quelconque disposition des présentes Conditions serait considérée comme non valide ou inapplicable, cette disposition sera limitée ou supprimée dans la mesure minimale nécessaire, et les autres dispositions des présentes Conditions resteront en vigueur et de plein effet. Le fait que Twitter ne demande pas l’exécution d’une quelconque disposition ou d’un quelconque droit au titre des présentes Conditions ne saurait être interprété comme une renonciation à cette disposition ou à ce droit.<br>
    
    										Si vous résidez en dehors de l’Union européenne ou de l’Espace Economique Européen, les présentes Conditions constituent un accord entre vous-même et Twitter, Inc., 1355 Market Street, Suite 900, San Francisco, CA 94103 U.S.A. Si vous avez des questions concernant les présentes Conditions, n’hésitez pas à nous
    										(https://help.twitter.com/forms) contacter.<br>
    
    										Si vous résidez dans l’Union européenne ou l’Espace Economique Européen, les présentes Conditions constituent un accord entre vous-même et Twitter International Company, société irlandaise dont le siège social est sis à One Cumberland Place, Fenian Street Dublin 2, D02 AX07 Irlande. Si vous avez des questions concernant les présentes Conditions, n’hésitez pas à nous contacter.<br>
    
    										Date d’effet : 1er janvier 2020
    								  </div>
    								  <div class="modal-footer">
    									<button type="button" class="btn btn-primary" data-dismiss="modal">Fermer</button>
    								  </div>
    								</div>
    							  </div>
    							</div>
    						</div>
    						
    						<div class="form-group draggable">
    							<label for="input-cond-NL">Newsletter</label><br>
    						<input type="checkbox" name="optradio" id="input-cond-NL"> S'abonner a la Newsletter
    								 
    						</div>
    					</form>
    				</div>
    			</div>	
    		</div>
    		
    		
    		<div class="col-md-9">
    			<div style="background-color: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); ">
    				<div class="text-muted empty-form text-center" style="font-size: 24px;">Déposer vos éléments ici.</div>
    				<div class="row form-body">
    					<div class="col-md-12 droppable sortable">
    					</div>
    					<div class="col-md-6 droppable sortable" style="display: none;">
    					</div>
    					<div class="col-md-6 droppable sortable" style="display: none;">
    					</div>
    
    				</div>
    			</div>
    		</div>
    	</div>
    	</div>
    </body>
    </html>


    script:

    <script>
    		
    		
    	$(document).ready(function() {
    		setup_draggable();
    		
    		
    
    		$("#copy").on("click", function() {
    			
    			
    			
    			var $copy = $(".form-body").parent().clone().appendTo(document.body);
    			$copy.find(".tools, :hidden").remove();
    			$.each(["draggable", "droppable", "sortable", "dropped",
    				"ui-sortable", "ui-draggable", "ui-droppable", "form-body"], function(i, c) {
    				$copy.find("." + c).removeClass(c);
    			})
    			var html = html_beautify($copy.html());
    			$copy.remove();
    
    			$modal = get_modal(html).modal("show");
    			$modal.find(".btn").remove();
    			$modal.find(".modal-title").html("Copier le HTML");
    			$modal.find(":input:first").select().focus();
    			
    			return false;
    		})
    		
    		
    	});
    	
    	var setup_draggable = function() {
    		$( ".draggable" ).draggable({
    			appendTo: "body",
    			helper: "clone"
    		});
    		$( ".droppable" ).droppable({
    			accept: ".draggable",
    			helper: "clone",
    			hoverClass: "droppable-active",
    			drop: function( event, ui ) {
    				$(".empty-form").remove();
    				var $ud = $(ui.draggable)
    				if(!$(ui.draggable).hasClass("dropped")) {
    					var $el = $ud
    						.clone()
    						.addClass("dropped")
    						.css({"position": "static", "left": null, "right": null})
    						.appendTo(this);
    						
    					// update id
    					var id = $ud.find(":input").attr("id");
    					
    					if(id) {
    						id = id.split("-").slice(0,-1).join("-") + "-" 
    							+ (parseInt(id.split("-").slice(-1)[0]) + 1)
    					
    						$ud.find(":input").attr("id", id);
    						$ud.find("label").attr("for", id);
    					}
    
    					// tools
    					$('<p class="tools">\
    						<a class="LienEdit">Editer<a> |\
    						<a class="remove-link">Retirer</a></p>').appendTo($el);
    					
    				} else {
    					if($(this)[0]!=$ud.parent()[0]) {
    						var $el = $ud
    							.clone()
    							.css({"position": "static", "left": null, "right": null})
    							.appendTo(this);
    						$ud.remove();
    					}
    				}
    			}
    		}).sortable();
    		
    	}
    	
    	var get_modal = function(content) {
    		var modal = $('<div class="modal" style="overflow: auto;" tabindex="-1">\
    			<div class="modal-dialog">\
    				<div class="modal-content">\
    					<div class="modal-header">\
    						<a type="button" class="close"\
    							data-dismiss="modal" aria-hidden="true">&times;</a>\
    						<h4 class="modal-title">Modification</h4>\
    					</div>\
    					<div class="modal-body ui-front">\
    						<textarea class="form-control" \
    							style="min-height: 200px; margin-bottom: 10px;\
    							font-family: Monaco, Fixed">'+content+'</textarea>\
    						<button class="btn btn-success">Mettre à jour</button>\
    					</div>\
    				</div>\
    			</div>\
    			</div>').appendTo(document.body);
    			
    		return modal;
    	};
    	
    	$(document).on("click", ".LienEdit", function(ev) {
    		var $el = $(this).parent().parent();
    		var $el_copy = $el.clone();
    		
    		var $edit_btn = $el_copy.find(".LienEdit").parent().remove();
    
    		var $modal = get_modal(html_beautify($el_copy.html())).modal("show");
    		$modal.find(":input:first").focus();
    		$modal.find(".btn-success").click(function(ev2) {
    			var html = $modal.find("textarea").val();
    			if(!html) {
    				$el.remove();
    			} else {
    				$el.html(html);
    				$edit_btn.appendTo($el);
    			}
    			$modal.modal("hide");
    			return false;
    		
    		})
    	});
    	
    	$(document).on("click", ".remove-link", function(ev) {
    		$(this).parent().parent().remove();
    	});
    	
    			
    	</script>



    Le résultat que je voudrais :

    Mon résultat à moi :

    • Partager sur Facebook
    • Partager sur Twitter

    Le nouveau dans la programmation.

    Editer un FormBuilder HTML avec Bootstrap

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown