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.
