a workarond to have selectable sortables
Hi,
My app needs items of a sortable to be selected and dragged togher,
but UI seems cannot handle this
since height is different for each element I had to resize the first
one to the lenght of the all selected, then I hide all but the first,
then I can drag the visible. Once dropped, i resize the visible one to
it's original size, then move the invisibiles inside the dom just
under the visible element, and finall show() again the invisibiles
This is my firt non-trivial jQ app, so code style it's sure not the
best, for example:
* I was not able to pass the collection array from selectable to
sortable
* i was not able to store (or read from original inline css) original
height of the dragged one (so I recalculate it)
here a working demo
http://pastebin.me/489ec75dd3fa9
now the bugs:
* I cannot make it works with multiple sortables list using
connectwith (wich is my primary goal check it at http://pastebin.me/489ed3f107b89
)
* works only dragging up.. the original item does not restore to its
height when moving item down on the list
any suggest-help with stylecode and the two bus is much appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Selectables demo - based on Interface demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/
svn/tags/1.5.2/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/
svn/tags/1.5.2/ui/ui.draggable.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/
svn/tags/1.5.2/ui/ui.selectable.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/
svn/tags/1.5.2/ui/ui.sortable.js"></script>
<style type="text/css" media="all">
*
{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body
{
background: #fff;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.selectable
{
background: #fbf;
xwidth: 100%;
xheight: 100%;
}
.selectableItem
{
width: 140px !important;
position: relative;
background-image: url(http://interface.eyecon.ro/demos/images/
pill_down.png);
font-weight: bold;
color: #000;
}
.ui-selected, .ui-selecting
{
background-image: url(http://interface.eyecon.ro/demos/images/
pill_down_selected.png);
}
.ui-draggable-dragging {
cursor: move;
}
</style>
</head><body>
<ul style="" class="selectable" id="selectable1">
<li class="selectableItem" style="height:12px" id="ca">1l</li>
<li class="selectableItem" style="height:12px" id="ac">2</li>
<li class="selectableItem" style="height:12px" id="ie">3</li>
<li class="selectableItem" style="height:12px" id="iac">4</li>
<li class="selectableItem" style="height:12px" id="ias">5</li>
<li class="selectableItem" style="height:12px" id="fi">6</li>
<li class="selectableItem" style="height:10px" id="im">7</li>
<li class="selectableItem" style="height:10px" id="isl">8</li>
<li class="selectableItem" style="height:10px" id="itt">9</li>
<li class="selectableItem" style="height:10px" id="idg">10</li>
<li class="selectableItem" style="height:11px" id="idp">11</li>
<li class="selectableItem" style="height:12px" id="ir">12</li>
<li class="selectableItem" style="height:10px" id="is">13</li>
<li class="selectableItem" style="height:10px" id="ist">14</li>
<li class="selectableItem" style="height:10px" id="isr">15</li>
<li class="selectableItem" style="height:10px" id="it">16</li>
<li class="selectableItem" style="height:10px" id="ea">17</li>
<li class="selectableItem" style="height:10px" id="xac">18</li>
<li class="selectableItem" style="height:10px" id="xacl">19</li>
</ul>
<script type="text/javascript">
$(document).ready(
function()
{
var collection;
$('.selectable').selectable({
stop: function(e,ui){
collection = jQuery('li.ui-
selected:visible');
if(collection) {
var inc=0;
var toty = 0
// i resize the first then
hide others
collection.each(function() {
inc++;
toty = toty +
this.clientHeight;
if (inc>1) $
(this).hide();
});
$('li.ui-
selected:visible').css('height',toty+'px');
$
('#selectable1').selectable("disable");
}
}
});
$('.selectable').sortable({
stop: function(ev,ui){
var totl=0;
var coll;
var h=0;
coll = $('li.ui-selected:gt(0)');
$('li.ui-selected').show();
$('li.ui-selected:first').after($('li.ui-
selected:gt(0)'));
// this to restore original height of first
element -the dragged one
coll.each( function() {
totl=totl+this.clientHeight;
});
h=$('li.ui-selected:first').height();
$('li.ui-selected:first').height(h-totl);
$('li').removeClass('ui-selected');
$('#selectable1').selectable("enable");
}
});
}
);
</script>
</body></html>
tnx