jQuery 1.2.3, jQuery UI 1.5b, Sortables and Vertical Axis Only and Opacity
Hello,
I have searched the archives and found potential answers but they
didn't work :(
To start with I was using Interface and jQuery 1.1.2, inadvertently
and felt it was best to get things working with jQuery 1.2.3 and
jQuery.ui 1.5b to use current software. Part of this has involved
transfering over to the new sortables interface. This has had a
benefit in that I have finally gotten the handle: property working.
The downside is that i have lost restricting movement on the y axis
only, and also opacity doesn't work (but that's probably due to my
lack of understanding of how the helper: attribute works....)
For a start, the XHTML file includes the following includes:
<script type="text/javascript" src="/lib/jquery-1.2.3.pack.js"></
script>
<script type="text/javascript" src="/lib/jquery.dimensions.js"></
script>
<script type="text/javascript" src="/lib/ui.mouse.js"></script>
<script type="text/javascript" src="/lib/ui.sortable.js"></script>
<script type="text/javascript" src="/lib/ui.sortable.ext.js"></
script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="sidebar.sortable.js"></script>
sidebar.sortable.js is my own code.
This calls the following:
var addGadgets=function(){
$('#side-bar').sortable(
{
containment: 'parent',
axis: 'y',
items: '.sortableitem',
handle: '.gadgetDragBar',
placeholder: 'sorthelper',
cursor: 'move',
change: function()
{
serial = $('#side-bar').sortable('serialize',{
expression: '(.+)'
});
$.cookie('cookie_name', serial, { expires: 7 });
}
}
);
};
I've tried variations of containment (e.g. document, parent, '#side-
bar' etc.) and tried setting axis to the old value of 'vertically' to
no avail.
The HTML that is dynamically created for #side-bar (#side-bar is added
dynamically through jQuery to the DOM which may have an effect) and
its containing elements is for example:
<div id="side-bar" class="ui-sortable" style="position: relative;">
<h2 class="screenReader">Your Worthing</h2>
<div id="weather-js" class="sortableitem">
<h3 id="weather-js-Head" class="gadgetDragBar">
<!-- heading text -->
</h3>
<div class="gadgetContent">
<!-- weather gadget -->
</div>
</div>
<div id="events-asp" class="sortableitem" style="">
<h3 id="events-asp-Head" class="gadgetDragBar">
<!-- heading text -->
</h3>
<div class="gadgetContent">
<!-- ebemts gadget -->
</div>
</div>
<div id="refuse-js" class="sortableitem" style="">
</div>
<div id="news-js" class="sortableitem">
</div>
</div>
So basically .sortableitems should be contained in #side-bar which is
a fix width right floated sortable.
Does anyone have any ideas why this is and how I can get the opacity
on drag back? If the axis can be fixed, this would make me very happy
indeed :) This is for a big website and anything that helps the user
will be immensely appreciated. Like I say y axis 'pinning' was working
with jQuery 1.1.2 and the old interface library.
Many thanks,
Vicky