2012-03-26 4 views
-1

Ich kann nicht zwei <ul> zwischen einander ziehen. Ich will in die zweite Hülse ziehen fristpod und umgekehrtDrag & Drop ein Panel in WebPage mit Javascript, CSS, HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title> 2PodTemplate1</title> 
<link href="Pod2.css" rel="stylesheet" type="text/css"/> 
    <script src="jquery/jquery-1.7.1.js"></script> 
    <script src="jquery/jquery.ui.core.js"></script> 
    <script src="jquery/jquery.ui.widget.js"></script> 
    <script src="jquery/jquery.ui.mouse.js"></script> 
    <script src="jquery/jquery.ui.draggable.js"></script> 
    <script src="jquery/jquery.ui.sortable.js"></script> 
<script> 
    $(function() { 
     $(“#firstpod, #secondpod”).sortable({ connectWith: ‘.connectedSortable’ }).disableSelection(); 
    }); 
    </script> 
</head> 

<body style="background-color:#333333;"> 
    <div id="PodTemplate"> 
     <div class="layout"> 
      <div class="column"> 
       <header> 
        <div class="header-align"> 
         <ul id="firstpod" class="connectedSortable" draggable="true"> 
          <li> 
           <div style="text-align:left;color:white;float:left;clear:left;">FirstName</div> 
          </li> 

          <li> 
           <div style="float:right;"> 
             <a href=" #" ><img src="images/minimize_up.png"></a> 
           </div> 
          </li> 
          <li> 
           <div style="float:right;"> 
            <a href="#"> 
              <img src="images/Forward.JPG" onClick="dropdown()"/> 
            </a> 
            <div id="hide" style="float:right;display:none;"> 
             <ul> 
              <li><img src="images/excel_icon.png">&nbsp;&nbsp;&nbsp;<img src="images/xml_file.png"></li></br> 
              <li><img src="images/xml_file.png">&nbsp;&nbsp;&nbsp;<img src="images/excel_icon.png"></li> 
             </ul> 
            </div> 
           </div> 
          </li> 
          <li> 
           <div style="float:right;"> 
            <a href=" #"><img src="images/maximize_up.png"></a> 
           </div> 
         </li> 
        </ul> 
       </div> 
      <header> 
      </div> 
     </div> 
     <div class="layout"> 
      <div class="column"> 
       <header> 
        <div class="header"> 
         <ul id="secondpod" class="connectedSortable" draggable="true"> 
          <li> 
           <div style="text-align:left;color:white;float:left;clear:left;">SecondName</div> 
          </li> 

          <li> 
           <div style="float:right;"> 
             <a href=" #" ><img src="images/minimize_up.png"></a> 
           </div> 
          </li> 
          <li> 
           <div style="float:right;"> 
            <a href="#"> 
              <img src="images/Forward.JPG" onClick="dropdown()"/> 
            </a> 
            <div id="hide" style="float:right;display:none;"> 
             <ul> 
              <li><img src="images/excel_icon.png">&nbsp;&nbsp;&nbsp;<img src="images/xml_file.png"></li></br> 
              <li><img src="images/xml_file.png">&nbsp;&nbsp;&nbsp;<img src="images/excel_icon.png"></li> 
             </ul> 
            </div> 
           </div> 
          </li> 
          <li> 
           <div style="float:right;"> 
            <a href=" #"><img src="images/maximize_up.png"></a> 
           </div> 
         </li> 
        </ul> 
        </div> 
       </header> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 
+0

Bitte formatieren Sie Ihren Codeblock korrekt. Ich habe versucht aufzuräumen, aber ich konnte deine Frage nicht bearbeiten. – jems

+0

Was ist mit dem obigen Code falsch? –

Antwort

0

Hey Kumpel Sie mit Ihrem Einzel- und Doppel Zitat verkorkste:

sollten Sie doppelte Anführungszeichen wie "anstelle von‚und‘Ebenso Apostroph. sollte 'nicht' oder "

Ihr Javascript sollte sein:

$(function() { 
    $("#firstpod, #secondpod").sortable({ connectWith: ".connectedSortable" }).disableSelection(); 
}); 

Dies funktioniert

+0

Nein, ich habe es benutzt, funktioniert immer noch nicht – Swaroop

+0

check firebug wenn die jquery ui und jquery geladen wird. Falls nicht, versuchen Sie es von CDN [link] (http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js) [link] ("http: //jquery-ui.googlecode .com/svn/tags/neueste/ui/minified/i18n/jquery-ui-i18n.min.js) – jems