11521 sujets

JavaScript, DOM et API Web HTML5

Probleme avec un drag and drop

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

http://hpics.li/5bd1bb8

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 votre aide
Sujet clos
Aller à