html - Unable to Drop draggable using jquery UI -


when drag li element mouse on over 'drop header' internal div should appear , can drop li element, reach internal drop area disapper.

here jsfidle

jquery(function ($) {     $("#dragli > li").draggable({helper: "clone"});             $( ".reviewerslistdv > div#droppable" ).droppable({             over: function( event, ui ) {             $(this).find('.parallelsectcontent').show();             },                     out: function( event, ui ) {                         $(this).find('.parallelsectcontent').hide();                     },             drop: function( event, ui ) {                     (ui.helper).remove(); //destroy clone                     $(ui.draggable).remove(); //remove list                $(this).find('.parallelsectcontent').show();             $( ).find('.dropzone').empty().append( 'droped');                   }                 }); }); 

demo: http://jsfiddle.net/lotusgodkk/6jjr2/50/

this referring to.

css:

.displaynone {     display:none; } .parallelsectheadr {     background: powderblue;     height: auto; } #droppable {     margin-bottom:10px; } .parallelsectcontent {     border: 1px solid black;     background: gray;     padding: 10px; } #dragli li {     background: pink;     margin-bottom: 5px;     width: 60px; } 

html:

<table width="100%">     <tbody>         <tr>             <td width="20%">                 <ul id="dragli">                     <li>part 1</li>                     <li>part 2</li>                     <li>part 3</li>                     <li>part 4</li>                 </ul>             </td>             <td width="80%">                 <div class="reviewerslistdv">                     <div id="droppable">                         <div class="parallelsectheadr"> <span class="floatright reviewstatusbx pending">drop header</span>                              <div class="parallelsectcontent clearfix displaynone">  <span class="dropzone">drop  on here</span>                              </div>                         </div>                     </div>                     <div id="droppable">                         <div class="parallelsectheadr"> <span class="floatright reviewstatusbx pending">drop header</span>                              <div class="parallelsectcontent clearfix displaynone">  <span class="dropzone">drop  on here</span>                              </div>                         </div>                     </div>                     <div id="droppable">                         <div class="parallelsectheadr"> <span class="floatright reviewstatusbx pending">drop header</span>                              <div class="parallelsectcontent clearfix displaynone">  <span class="dropzone">drop  on here</span>                              </div>                         </div>                     </div>                 </div>             </td>         </tr>     </tbody> </table> 

i moved 'parallelsectcontent' inside 'parallelsectheadr'. removed height , line-height css. should work now. can add new css style it


Comments

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -