.sortable() needs to be called on the container element #trip_content, not
each child. Then you can use the handle option to make each child sortable
only by the .itemHeading:
$("#trip_content").sortable({
handle: ".itemHeading"
});
- Richard
On Tue, Aug 4, 2009 at 5:32 AM, EugeneS <seuge...@gmail.com> wrote:
>
> here i made a small sample so you can see the problem in action
>
> http://zaslugi.ru/temp/demo.html
>
> coz i already posted request here will try to receive help here to bot
> create multiple clones ...
>
> and then will try to post in UI group :\
> Thanks.
>
> On Aug 4, 11:42 am, "Richard D. Worth" <rdwo...@gmail.com> wrote:
> > Could you put together a live sample on jsbin.com:http://jsbin.com/
> >
> > <http://jsbin.com/>Also, note there's a dedicated list for jQuery UI
> > questions:
> >
> > http://groups.google.com/group/jquery-ui
> >
> > Thanks.
> >
> > <http://groups.google.com/group/jquery-ui>- Richard
> >
> > On Tue, Aug 4, 2009 at 4:05 AM, EugeneS <seuge...@gmail.com> wrote:
> >
> > > hello,
> >
> > > have such a structure in HTML which finally looks like shown on this
> > > image
> >
> > >http://www.screencast.com/t/LNfPgoOWUf7:
> >
> > > ------------------------------------------------------
> > > <div
> > > id="trip_content">
> > > <div class="productCart"
> > > id="dest1">
> > > <div
> > > class="itemHeading">
> > > Johannesburg<img alt="close" src="images/cross.jpg"
> > > onClick="del_destination(1);"/
> >
> > > </
> > > div>
> > > Depart: <input name="depart_date[1]"
> > > autocomplete="off"
> > > class="input_cal" id="depart_date1" size="15" maxlength="10"
> > > readonly="" value="" type="text" style="width:106px;" />
> > > </
> > > div>
> > > <div class="productCart"
> > > id="dest2">
> > > <div
> > > class="itemHeading">
> > > London<img alt="close" src="images/cross.jpg"
> > > onClick="del_destination(2);"/
> >
> > > </
> > > div>
> > > Depart: <input name="depart_date[2]"
> > > autocomplete="off"
> > > class="input_cal" id="depart_date2" size="15" maxlength="10"
> > > readonly="" value="" type="text" style="width:106px;" />
> > > </
> > > div>
> > > <div class="productCart"
> > > id="dest3">
> > > <div
> > > class="itemHeading">
> > > Paris<img alt="close" src="images/cross.jpg"
> > > onClick="del_destination(3);"/
> >
> > > </
> > > div>
> > > Depart: <input name="depart_date[3]"
> > > autocomplete="off"
> > > class="input_cal" id="depart_date3" size="15" maxlength="10"
> > > readonly="" value="" type="text" style="width:106px;" />
> > > </
> > > div>
> > > </
> > > div>
> > > ------------------------------------------------------
> >
> > > was trying to use this code:
> >
> > > ------------------------------------------------------
> >
> > > $("#trip_content .productCart").sortable({
> >
> > > opacity: 0.8,
> >
> > > cursor: 'move',
> >
> > > axis: 'y',
> >
> > > forcePlaceholderSize: true,
> >
> > > update: function(event, ui) {
> >
> > > recalc_order();
> >
> > > }
> > > });
> > > ------------------------------------------------------
> >
> > > but whole block dragging and dropping doesnt work (only green header
> > > some how dragging but not dropping) .... can any one help how to
> > > create next functionality:
> >
> > > i need to drag for the green header and whole block should be dragged
> > > and dropped in higher or lower position.
> >
> > > thanks.
>
