Jquery 使用javascript、css、html在网页中拖放面板_Jquery_Jquery Ui_Css_Html5 Video

Jquery 使用javascript、css、html在网页中拖放面板

jquery jquery-ui css

Jquery 使用javascript、css、html在网页中拖放面板,jquery,jquery-ui,css,html5-video,Jquery,Jquery Ui,Css,Html5 Video,我无法在彼此之间拖动两个。我想把fristpod拖进第二个吊舱，反之亦然 <!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="sty

我无法在彼此之间拖动两个

。我想把fristpod拖进第二个吊舱，反之亦然

<!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>


2模块模板1
$（函数（）{
$（“#firstpod，#secondpod”）.sortable（{connectWith:'.connectedSortable'}）.disableSelection（）；
});


名字















第二名

嘿，伙计，你把单引号和双引号搞糟了：

你应该使用双引号，比如“而不是”和“。同样，单引号应该是“不是”或”

您的javascript应该如下所示：

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

这将起作用

请正确格式化您的代码块。我试图清理，但无法编辑您的问题。上面的代码有什么问题？如果jquery ui和jquery正在加载，请检查firebug。如果没有，请尝试从CDN[链接]（“”）加载