library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

layout demo: add new components via cloned draggables, connected to sortables

Browse Source
This commit is contained in:
Jörn Zaefferer 2008-09-03 14:29:16 +00:00
parent 6174fef86f
commit 7084fa079d
4 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demos/real-world/layout/demo.css
View File

@ -41,6 +41,6 @@ dl.sort dt span.options a.disabled { background:#555 !important; cursor:default;
#content { float:left; width:400px; }
#sidebar { float:left; width:200px; }
#footer { width:638px; }
#trashcan { float:left; }
#meta { float:left; }
#trashcan p { margin:0; }

6
demos/real-world/layout/demo.js
View File

@ -81,11 +81,15 @@
//placeholder: 'placeholder',
connectWith: els,
start: function(e,ui) {
ui.helper.css("width", ui.item.width());
ui.helper.css("width", ui.item.parent().width());
},
change: sortableChange,
update: sortableUpdate
});
$('#components > dl').draggable({
connectToSortable: $els,
helper: 'clone'
})
});
$(window).bind('load',function(){

BIN
demos/real-world/layout/img01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

15
demos/real-world/layout/index.html
View File

@ -68,10 +68,25 @@
</div>
</div>
<div id="meta">
<div id="components" class="ui-sortable">
<h2>Components</h2>
<dl class="sort">
<dt>Subheadline</dt>
<dd>Paragraph</dd>
</dl>
<dl class="sort">
<dt>Image</dt>
<dd><img src="img01.png" /></dd>
<dd>Caption</dd>
</dl>
</div>
<div id="trashcan" class="ui-sortable">
<h2>Trash can</h2>
<p>Drag modules here to delete them.</p>
</div>
</div>
<div class="clear"></div>
<div id="overlay">