soucis avec un drag and drop
djoufouf
1ere : Est résolu
2eme : quand je prend un lien il ne met pas dans la bonne couleur dans le compartiment drop (j'ai une liste avec 3 couleur differente et je dois avoir absolument la meme couleur malheureusement :s)
3eme : des que j ai drag et drop un element il doit s effacer de ma liste (ce qui n est pas le cas et je ne sais pas comment faire :S)
voici une image qui illustre
et voici mon code
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
/* CSS */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.droite {
float:right;
}
.oModal {
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.oModal:target {
opacity:1;
pointer-events: auto;
}
.oModal:target > div {
margin: 10% auto;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.oModal > div {
max-width: 800px;
height:600px;
position: relative;
margin: 1% auto;
padding: 8px 8px 8px 8px;
border-radius: 5px;
background: #eee;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.oModal > div header,.oModal > div footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
.oModal .footer {
border:none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
.oModal > div h2 {
margin:0;
}
.oModal > div .btn {
float:right;
}
.oModal > div section,.oModal > div > header, .oModal > div > footer {
padding:15px;
}
.lien ul {
padding:0;
margin:0;
list-style-type:none;
}
.lien li {
margin-left:2px;
float:left;ff
}
.lien ul li a {
display:block;
float:left;
width:60px;
color:black;
text-decoration:none;
text-align:center;
padding:5px;
/*pour avoir un effet "outset" avec IE :*/
border-color:#DCDCDC #696969 #696969 #DCDCDC;
}
.lien ul li a:hover {
background-color:#D3D3D3;
border-color:#696969 #DCDCDC #DCDCDC #696969;
}
.oModal > div .essai {
overflow:scroll;
padding-left : 7px;
height: 400px;
max-width:375px;
text-overflow: ellipsis;
overflow-x: visible ;
white-space: nowrap;
background-color:whitesmoke;
}
.oModal > div .essai ul li {
text-decoration: none;
}
#drop{
overflow:scroll;
padding-left : 7px;
height: 400px;
max-width:375px;
text-overflow: ellipsis;
overflow-x: visible ;
white-space: nowrap;
background-color:whitesmoke;
}
.oModal > div .essai .NomACRO{
float:left;
width: 60px;
border-right: 1px solid silver;
text-align:left;
white-space: nowrap;
overflow:hidden;
text-decoration: none;
}
.oModal > div .essai .NomBODY{
text-decoration: none;
white-space: nowrap;
}
table{width: 100%; height:100px; border: none; border-top: solid 1mm #AAAADD;}
table td{ }
.ui-widget-content{ border:none;}
#cart ol {height:380px;display:block;float:left;width:100%;;padding:5px;overflow-x:hidden;overflow-y:scroll;background-color:whitesmoke; text-align:left;}
</style>
<script>
$(function() {
$( ".essai li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
</head>
<!-- HTML -->
<div id="oModal" class="oModal">
<div>
<header>
<a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
<h2>PDF generation tool</h2>
</header>
<section>
<div class="lien">
<ul>
<li><a href="#">Body</a></li>
<li><a href="#">Function</a></li>
</ul>
</div>
<table>
<tr>
<td style="width: 50%; padding-top:10px; text-align: left">
Search : <input name="txtId" type="text" style="width : 85%;"/>
<div class="essai">
<ul>
<li><div class=NomACRO><font color=blue>AGRI</div><div class=NomBODY><font color=blue> Agriculture and Rural Development</div></li><li><div class=NomACRO><font color=blue>CONT</div><div class=NomBODY><font color=blue> Budgetary Control</div></li><li><div class=NomACRO><font color=blue>BUDG</div><div class=NomBODY><font color=blue> Budgets</div></li><li><div class=NomACRO><font color=blue>LIBE</div><div class=NomBODY><font color=blue> Civil Liberties, Justice and Home Affairs</div></li><li><div class=NomACRO><font color=blue>AFCO</div><div class=NomBODY><font color=blue> Constitutional Affairs</div></li><li><div class=NomACRO><font color=blue>CULT</div><div class=NomBODY><font color=blue> Culture and Education</div></li><li><div class=NomACRO><font color=blue>DEVE</div><div class=NomBODY><font color=blue> Development</div></li><li><div class=NomACRO><font color=blue>ECON</div><div class=NomBODY><font color=blue> Economic and Monetary Affairs</div></li><li><div class=NomACRO><font color=blue>EMPL</div><div class=NomBODY><font color=blue> Employment and Social Affairs</div></li><li><div class=NomACRO><font color=blue>ENVI</div><div class=NomBODY><font color=blue> Environment, Public Health and Food Safety</div></li><li><div class=NomACRO><font color=blue>PECH</div><div class=NomBODY><font color=blue> Fisheries</div></li><li><div class=NomACRO><font color=blue>AFET</div><div class=NomBODY><font color=blue> Foreign Affairs</div></li><li><div class=NomACRO><font color=blue>ITRE</div><div class=NomBODY><font color=blue> Industry, Research and Energy</div></li><li><div class=NomACRO><font color=blue>IMCO</div><div class=NomBODY><font color=blue> Internal Market and Consumer Protection</div></li><li><div class=NomACRO><font color=blue>INTA</div><div class=NomBODY><font color=blue> International Trade</div></li><li><div class=NomACRO><font color=blue>JURI</div><div class=NomBODY><font color=blue> Legal Affairs</div></li><li><div class=NomACRO><font color=blue>PETI</div><div class=NomBODY><font color=blue> Petitions</div></li><li><div class=NomACRO><font color=blue>REGI</div><div class=NomBODY><font color=blue> Regional Development</div></li><li><div class=NomACRO><font color=blue>TRAN</div><div class=NomBODY><font color=blue> Transport and Tourism</div></li><li><div class=NomACRO><font color=blue>FEMM</div><div class=NomBODY><font color=blue> Women's Rights and Gender Equality</div></li>
</ul>
</div>
</td>
<td>
<font color=blue>></font>
<font color=green>></font>
>>
<<
</td>
<td style="width: 50%; text-align: right">
/ 80
<div id="cart">
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
</td>
</tr>
</table>
<section>
<footer class="cf">
</footer>
</div>
</div>
<a href="#oModal">Ouvrir le popup</a>merci pour vos reponses