Bonjours ,
Je suis à la création d'un site web en utilisant le drag and drop de jQuery , j'ai réussit a crée des des drop qui font des copie de form , list , img etc...
Ce que je doit faire c'est drag and drop des éléments afin de complété une div , comme un build form mais en beaucoup moins compliquer , mais ce que j'essaie de faire c'est de drag & drop un élément et de pouvoir dropper d'autre élément dans l'élément dropper , je ne sais pas si vous voyez la chose ... c'est pas facile a expliquer..
voici le code html avec tout le bazars qu'il contient :
Merci de vos future réponses.
Modifié par jattaquelejquery (03 Jun 2015 - 09:33)
Je suis à la création d'un site web en utilisant le drag and drop de jQuery , j'ai réussit a crée des des drop qui font des copie de form , list , img etc...
Ce que je doit faire c'est drag and drop des éléments afin de complété une div , comme un build form mais en beaucoup moins compliquer , mais ce que j'essaie de faire c'est de drag & drop un élément et de pouvoir dropper d'autre élément dans l'élément dropper , je ne sais pas si vous voyez la chose ... c'est pas facile a expliquer..
voici le code html avec tout le bazars qu'il contient :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Demo</title>
<style>
div#modele {
width:20%;
height:600px;overflow:auto;
background-color:cyan;
}
.page {
position:absolute;
margin-left:20%;
margin-top: -55%;
width:80%;
height:700px;
}
.cadre {
position:absolute;
margin-left:20%;
margin-top: 10%;
width:70%;
height:500px;
background-color:cyan;
}
.footer {
position:absolute;
bottom:0;
background-color:#00FF00;
width:100%;
text-align:center;
}
.header {
background-color:#00FF00;
width:100%;
text-align:center;
}
.middle {
position:absolute;
top:47px;
background-color:#00FF00;
width:45%;
}
.middle2 {
position:absolute;
top:47px;
right:0px;
width:45%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
</head>
<body>
<div id="modele">
<img src="cadre.jpg" class="drag-cadre" id="draggable"data_type="cadre">
<img src="rond.jpg" class="drag-image" id="draggable"data_type="topbar">
<img src="octo.jpg" class="drag-image" id="draggable1"data_type="midbar">
<img src="octog.jpg" class="drag-image" id="draggable2"data_type="midbar2">
<img src="carre.jpg" class="drag-image" id="draggable3"data_type="botbar">
</div>
<input type="button" value="Recommencer" Onclick="javascript:window.history.go(0)">
<div class="page">
</div>
<script>
$(".drag-cadre").draggable({revert:true,helper:"clone"}) ;
$(".page").droppable({
drop:function(event, ui){
alert("drag type:"+$(ui.draggable).attr("data_type"));
if($(ui.draggable).attr("data_type")=="cadre")
$(this).append("<div class=cadre></div>");
}});
$(".drag-image").draggable({revert:true,helper:"clone"}) ;
$(".cadre").droppable({
drop:function(event, ui){
alert("drag type:"+$(ui.draggable).attr("data_type"));
if($(ui.draggable).attr("data_type")=="topbar")
$(this).append("<div class=header><form action='x' method='post'>Identification :<input type='text' name='login' />Mot de passe :<input type='password' name='pass' /></form></div>");
if($(ui.draggable).attr("data_type")=="midbar2")
$(this).append("<div class=middle2><img src='octog.jpg'</div>");
if($(ui.draggable).attr("data_type")=="midbar")
$(this).append("<div class=middle><ul> <li> Article 1 </li> <li> Article 2 </li> <li> Article 3 </li><li> Article 4 </li><li> Article 5 </li> <li> Article 6 </li><li> Article 7 </li><li> Article 8 </li><li> Article 9 </li><li> Article 10 </li></ul></div>");
if($(ui.draggable).attr("data_type")=="botbar")
$(this).append("<div class=footer><form action='x' method='post'><div><label for='nom'>Nom : </label><input type='text' id='nom' /></div><div><label for='courriel'>Courriel :</label><input type='email' id='courriel' /></div><div><label for='message'> Message :</label><textarea id='message'></textarea></div><div class='button'><button type='submit'>Envoyer votre message</button></div></form></div>");
}});
</script>
</body>
Merci de vos future réponses.
Modifié par jattaquelejquery (03 Jun 2015 - 09:33)
...