jQuery Sortierbare Dashboard Ausrichtung

Question

Ich versuche, ein Dashboard (xbox one style) mit jQuery sortierbar zu erstellen. Ich habe ein paar unterschiedlich große Portlets, mit denen ich mich bewegen kann, aber ich scheine nicht in der Lage zu sein, einige in die richtige Position zu ziehen, und ich bin nicht sicher warum.

Unten können Sie sehen, wie es derzeit aussieht. Ich bin nicht in der Lage Verkäufe zu ziehen zwischen Online-Hilfe/Ausbildung info und derselbe auf der gegenüberliegenden Seite

HTML (einen vollständigen Platz zu schaffen):

<div class="sortable"> 
       <div class="portlet span-1"> 
        <div class="portlet-header">Sales</div> 
        <div class="portlet-content"></div> 
       </div> 

       <div class="portlet span-1"> 
        <div class="portlet-header">Online Help</div> 
        <div class=""></div> 
       </div> 

       <div class="portlet span-3"> 
        <div class="portlet-header">Xpress Mail</div> 
        <div class="portlet-content"></div> 
       </div> 

       <div class="portlet span-1"> 
        <div class="portlet-header">Online Help</div> 
        <div class=""></div> 
       </div> 

       <div class="portlet span-1"> 
        <div class="portlet-header">Online Help</div> 
        <div class=""></div> 
       </div> 

       <div class="portlet span-1"> 
        <div class="portlet-header">Training Info</div> 
        <div class="portlet-content"></div> 
       </div> 

       <div class="portlet span-2"> 
        <div class="portlet-header">My Fogbugz</div> 
        <div class="portlet-content"></div> 
       </div> 

       <div class="portlet span-1"> 
        <div class="portlet-header">User Group</div> 
        <div class="portlet-content"></div> 
       </div> 

      </div> 

CSS:

.sortable { 
width: 100%; 
height: 700px; 
font-size: 0; 
border-radius: 5px; 
} 

.portlet { 
font: 12px/1.3 sans-serif; 
margin: 3px; 
padding: 1px; 
display: inline-block; 
vertical-align: top; 
height: 200px; 
background-color:deepskyblue; 
} 

.portlet.span-1 { width: 300px; } 
.portlet.span-2 { width: 600px; } 
.portlet.span-3 { width: 600px; height:400px} 

.portlet-header { 
margin: 1px; 
padding: 1px 0 2px 3px; 
} 

.portlet-header .ui-icon { 
float: right; 
} 

.portlet-content { 
padding: 4px; 
} 

.portlet-minimized { 
height: auto; 
} 

.portlet-minimized .portlet-content { 
display: none; 
} 

.ui-sortable-placeholder { 
border: 1px dotted black; 
visibility: visible !important; 
} 

JS:

$(function() { 
    $('.sortable').sortable({ connectWith: '.sortable' }).disableSelection(); 

    $('.portlet') 
     .addClass('ui-widget ui-widget-content ui-corner-all') 
     .find('.portlet-header') 
      .addClass('ui-widget-header ui-corner-all') 
      .prepend('<span class="ui-icon ui-icon-minusthick"></span>') 
     .end() 
     .find('.portlet-content') 
      .text(''); 

    $('.portlet-header .ui-icon').on('click', function() { 
     $(this).toggleClass('ui-icon-minusthick ui-icon-plusthick'); 
     $(this).closest('.portlet').toggleClass('portlet-minimized'); 
    }); 
}); 

Answer 1

Vielleicht suchen Sie etwas, dies, nichts verpasst nur die ui-helper-clearfix hier .addClass ("Ui-Widget UI-Widget-Inhalt UI-Helper-Clearfix UI-Ecke-alle"). Wenn ich falsch liege . Frag mich in Kommentar Ich werde antworten. LiveFiddle

 

 
$(function() { 
 
    $('.sortable').sortable({ 
 
    connectWith: '.sortable' 
 
    }).disableSelection(); 
 

 
    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
 
    .find(".portlet-header") 
 
    .addClass("ui-widget-header ui-corner-all") 
 
    .prepend('<span class="ui-icon ui-icon-minusthick"></span>') 
 
    .end() 
 
    .find(".portlet-content").text(' '); 
 
    $('.portlet-header .ui-icon').on('click', function() { 
 
    $(this).toggleClass('ui-icon-minusthick ui-icon-plusthick'); 
 
    $(this).closest('.portlet').toggleClass('portlet-minimized'); 
 
    }); 
 
}) 
 

 

 

 
body{ 
 
    background:#bbb; 
 
    background-repeat:no-repeat; 
 
     } 
 
    .sortable { 
 
    width: 100%; 
 
    height: 700px; 
 
    font-size: 0; 
 
    border-radius: 5px; 
 
} 
 

 
.portlet { 
 
    font: 12px/1.3 sans-serif; 
 
    margin: 3px; 
 
    padding: 1px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 200px; 
 
    background-color: deepskyblue; 
 
} 
 

 
.portlet.span-1 { 
 
    width: 300px; 
 
} 
 

 
.portlet.span-2 { 
 
    width: 600px; 
 
} 
 

 
.portlet.span-3 { 
 
    width: 600px; 
 
    height: 400px 
 
} 
 

 
.portlet-header { 
 
    margin: 1px; 
 
    padding: 1px 0 2px 3px; 
 
} 
 

 
.portlet-header .ui-icon { 
 
    float: right; 
 
} 
 

 
.portlet-content { 
 
    padding: 4px; 
 
} 
 

 
.portlet-minimized { 
 
    height: auto; 
 
} 
 

 
.portlet-minimized .portlet-content { 
 
    display: none; 
 
} 
 

 
.ui-sortable-placeholder { 
 
    border: 1px dotted black; 
 
    visibility: visible !important; 
 
}

<head> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    </head> 
 
    <body> 
 
<div class="sortable"> 
 
    <div class="portlet span-1"> 
 
<div class="portlet-header">Sales</div> 
 
<div class="portlet-content"></div> 
 
    </div> 
 

 
    <div class="portlet span-1"> 
 
<div class="portlet-header">Online Help</div> 
 
<div class=""></div> 
 
    </div> 
 

 
    <div class="portlet span-3"> 
 
<div class="portlet-header">Xpress Mail</div> 
 
<div class="portlet-content"></div> 
 
    </div> 
 

 
    <div class="portlet span-1"> 
 
<div class="portlet-header">Online Help</div> 
 
<div class=""></div> 
 
    </div> 
 

 
    <div class="portlet span-1"> 
 
<div class="portlet-header">Online Help</div> 
 
<div class=""></div> 
 
    </div> 
 

 
    <div class="portlet span-1"> 
 
<div class="portlet-header">Training Info</div> 
 
<div class="portlet-content"></div> 
 
    </div> 
 

 
    <div class="portlet span-2"> 
 
<div class="portlet-header">My Fogbugz</div> 
 
<div class="portlet-content"></div> 
 
    </div> 
 

 
    <div class="portlet span-1"> 
 
<div class="portlet-header">User Group</div> 
 
<div class="portlet-content"></div> 
 
    </div> 
 

 
</div> 
 

 
    </body>