如何將容器div內的div移動到使用jquery的另一個容器div？

我試圖將容器div內的div移動到另一個使用jQuery可排序api的容器div。我已經在jquery ready函數中添加了代碼，但由於某種原因它不起作用。如何將容器div內的div移動到使用jquery的另一個容器div？

這裏是我添加的代碼：

$(".portlet-content").sortable({ 
    connectWith: ".portlet-content" 
});

我添加下面的完整代碼正確理解。任何幫助將不勝感激。感謝提前:)

<html> 
<head> 
    <title>Javascript Create Div Element Dynamically</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> 
    <style type="text/css"> 
     body { 
      min-width: 520px; 
      background-color: dimgray; 
     } 

     .column { 
      width: 230px; 
      float: left; 
      padding-bottom: 100px; 
     } 

     .portlet { 
      margin: 0 1em 1em 0; 
      padding: 0.3em; 
     } 

     .portlet-header { 
      padding: 0.2em 0.3em; 
      margin-bottom: 0.5em; 
      position: relative; 
     } 

     .portlet-toggle { 
      position: absolute; 
      top: 50%; 
      right: 0; 
      margin-top: -8px; 
     } 

     .portlet-content { 
      padding: 0.4em; 
      background-color: lightgray; 
      border: 2px solid white; 
     } 

     .portlet-content:hover { 
      background-color: lightblue; 
     } 


     .portlet-placeholder { 
      border: 1px dotted black; 
      margin: 0 1em 1em 0; 
      height: 50px; 
     } 

     div { 
      min-height: 20px; 
     } 

    </style> 
    <script type="text/javascript" language="javascript"> 
     $(function() { 
      $(".column").sortable({ 
       connectWith: ".column", 
       handle: ".portlet-header", 
       cancel: ".portlet-toggle", 
       placeholder: "portlet-placeholder ui-corner-all" 
      }); 

      $(".portlet-content").sortable({ 
       connectWith: ".portlet-content" 
      }); 

      $(".portlet") 
       .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
       .find(".portlet-header") 
       .addClass("ui-widget-header ui-corner-all"); 
     }); 
    </script> 
</head> 
<body> 
    <div class="column"> 
     <div class='portlet'> 
      <div class='portlet-header'><span class='rubrik'>Section 1</span></div> 
      <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
      <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
     </div> 
    </div> 
    <div class="column"> 
     <div class='portlet'> 
      <div class='portlet-header'><span class='rubrik'>Section 2</span></div> 
      <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
     </div> 
    </div> 
</body> 
</html>

來源

2014-02-16 Shahab Q

$(".portlet").sortable({ 
     connectWith: ".portlet", 
     items: ".portlet-content" 
});

來源

2014-02-16 23:17:16 falinsky

工作完全@falinsky :) –

@ user3221235歡迎 – falinsky

如何將容器div內的div移動到使用jquery的另一個容器div？

回答

相關問題