Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Portlets</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 
  
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
  
    
    <style>
      body { font-size: 65%; }
    .column { width: 170px; float: left; padding-bottom: 100px; }
    .portlet { margin: 0 1em 1em 0; }
    .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
    .portlet-header .ui-icon { float: right; }
    .portlet-content { padding: 0.4em; }
    .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
    .ui-sortable-placeholder * { visibility: hidden; }
    </style>
  
    <script>
    $(function() {
        $( ".column" ).sortable({
            connectWith: ".column"
        });
        $( ".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" );
        $( ".portlet-header .ui-icon" ).click(function() {
            $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
            $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
        });
        $( ".column" ).disableSelection();
    });
    
    </script>
</head>
<body>
<div class="demo">
<div class="column">
    <div class="portlet">
        <div class="portlet-header">Feeds</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    
    <div class="portlet">
        <div class="portlet-header">News</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">Shopping</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">Links</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    
    <div class="portlet" style="width:600px">
        <div class="portlet-header">Images</div>
        <div class="portlet-content">
            <div class="wide_home_item">
<div class="wide_home_item">
<h2>קונג פו וין צ'ון - לא רק לחימה</h2>
<p><strong>קונג פו</strong> וין צ'ון הוא סגנון של אומנות לחימה שפותח בידי מאסטרים בכירים בשאולין במאה ה-17. הסגנון מבוסס על גרסה דרומית של שאולין, כמיצוי אפקטיבי של הסגנון עם תנועה מינימאלית וחסכונית. לכן תכונות הסגנון העיקריות הן לקוניות וקונקרטיות, אין שום דבר שמיועד לאסטטיקה ולדברים דומים, המדד היחיד הוא יעילות. <br />
<em>קונג פו</em> וין צ'ון איננו רק אומנות לחימה יעילה. הוין צ'ון מסייע לגילוי בעיות תפקודיות ופסיכולוגיות ומאפשר לייצר ולהתאים טכניקות אימון ספציפיות לתיקון בעיות אלו. מערכת אימונים הבנוייה על בסיס ניתוח מעמיק של התנועה מסייעת למתאמן להשיג בריאות טובה והתפתחות רוחנית. <br />
לבית הספר 3 סניפים: <a href="Default.aspx?PageName=119">תל אביב,</a> <a href="Default.aspx?PageName=120">אשדוד </a><a href="Default.aspx?PageName=121">וקריות.</a></p>
</div>
<div class="home_item ">
<h2>עסקים בווייטנאם: חברים ומסדרונות ממשל</h2>
<img class="item_photo" alt="קונג פו" width="78" height="73" src="/userfiles/image/kungfu_tal_reshef_small.png" /><span style="font-weight: bold">08.11.2011</span>
<p>כתבה על איגור והמורה שלו, מאסטר זאנג, מאת הכתב טל רשף, התפרסמה ב-ynet.</p>
<a target="_blank" href="http://www.ynet.co.il/articles/0,7340,L-4145406,00.html">לכתבה</a></div>
<div class="home_item box_left">
<h2>אלבום תמונות</h2>
<img class="item_photo" alt="קונג פו" width="78" height="73" src="/userfiles/image/kungfu_sadnat108_small.png" /><span style="font-weight: bold">11.08.2011</span>
<p>אלבום תמונות חדש.<br />
תמונות מסדנת 108 / מוט ארוך, שהעביר מאסטר נגוין טיין פי בישראל, בין 21.07.2011 - 31.07.2011&nbsp;</p>
<a href="Default.aspx?PageName=211">קרא עוד</a></div>
<div class="home_item">
<h2>חוויות מוין צ'ון קונג פו</h2>
<img class="item_photo" alt="קונג פו" width="78" height="73" src="/userfiles/image/kungfu_mark_small.png" /><span style="font-weight: bold">מארק קיריצ'נקו</span>
<p>שלום לכל המתעניינים, אני מארק, תלמיד תיכון בן 15 ומתאמן בקונג פו וין צ'ון. בעברי התאמנתי 4 שנים בקראטה ולאחר הפסקה ארוכה בה עסקתי בסוגי ספורט שונים בחיפוש אחר ה&quot;דבר שלי&quot;...</p>
<a href="Default.aspx?PageName=212">קרא עוד</a></div>
<div class="home_item box_left">
<h2>חוויות קונג פו</h2>
<img class="item_photo" alt="קונג פו" width="78" height="73" src="/userfiles/image/kungfu_anna_small.png" /><span style="font-weight: bold">אנה קוזנצוב</span>
<p>התחלתי להתאמן בקונג פו לפני כמעט שנה. תמיד רציתי להתאמן &quot;במשהו&quot; &ndash; לא ממש ידעתי אם קונג פו, קראטה או קרב מגע, ולמען האמת, לא ממש ידעתי מה ההבדל.</p>
<a href="Default.aspx?PageName=210">קרא עוד</a></div>
</div>
<p>cxcxcxc</p>
        </div>
    </div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>
    Enable portlets (styled divs) as sortables and use the <code>connectWith</code>
    option to allow sorting between columns.
</p>
</div><!-- End demo-description -->
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers