使用javascript，css，html拖放網頁中的面板

-1

我無法在對方之間拖動兩個<ul>。我想拖fristpod到第二莢，反之亦然使用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>

來源

2012-03-26 Swaroop

請正確格式化您的代碼塊。我試圖清理，但我無法編輯你的問題。 – jems 2012-03-26 16:11:28

上面的代碼有什麼問題？ – 2012-03-26 16:13:08

嗨，老兄，你與你的單，雙引號搞砸：

您應該使用雙引號像「，而不是‘和’同樣的單引號。應該是 '不' 或'

您的JavaScript應該是這樣的：

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

這將工作

來源

2012-03-26 16:32:18 jems

不，我用它，仍然不工作 – Swaroop 2012-03-27 03:50:37

如果jquery ui和jquery正在加載，請檢查firebug。如果不嘗試從CDN加載[鏈接]（http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js）[link]（「http：//jquery-ui.googlecode .COM/SVN /標籤/最新/ UI /縮小的/ i18n中/ jQuery的UI-i18n.min.js） – jems 2012-03-27 16:41:03

使用javascript，css，html拖放網頁中的面板

回答

相關問題