<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 </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 שנים בקראטה ולאחר הפסקה ארוכה בה עסקתי בסוגי ספורט שונים בחיפוש אחר ה"דבר שלי"...</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>התחלתי להתאמן בקונג פו לפני כמעט שנה. תמיד רציתי להתאמן "במשהו" – לא ממש ידעתי אם קונג פו, קראטה או קרב מגע, ולמען האמת, לא ממש ידעתי מה ההבדל.</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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |