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; } #content { float:left; width:400px; }
#sidebar { float:left; width:200px; } #sidebar { float:left; width:200px; }
#footer { width:638px; } #footer { width:638px; }
#trashcan { float:left; } #meta { float:left; }
#trashcan p { margin:0; } #trashcan p { margin:0; }

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

@ -81,11 +81,15 @@
//placeholder: 'placeholder', //placeholder: 'placeholder',
connectWith: els, connectWith: els,
start: function(e,ui) { start: function(e,ui) {
ui.helper.css("width", ui.item.width()); ui.helper.css("width", ui.item.parent().width());
}, },
change: sortableChange, change: sortableChange,
update: sortableUpdate update: sortableUpdate
}); });
$('#components > dl').draggable({
connectToSortable: $els,
helper: 'clone'
})
}); });
$(window).bind('load',function(){ $(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> </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"> <div id="trashcan" class="ui-sortable">
<h2>Trash can</h2> <h2>Trash can</h2>
<p>Drag modules here to delete them.</p> <p>Drag modules here to delete them.</p>
</div> </div>
</div>
<div class="clear"></div> <div class="clear"></div>
<div id="overlay"> <div id="overlay">