I tried using carousel for the same list that i made sortable. It
working fine but if any element is hidden on left side of "my-
carousel" while clicking next button of carousel to scroll the
sortable list  than problem comes but without clicking next button it
works fine( i.e fresh load of sortable list)

Problem is:
After clicking carousel next button to scroll the sortable list when
first indexed element of the sortable list is hidden on left side as
mention above and if i try to move second indexed element to the third
index than i should hover over the fourth indexed element to see the
empty space on third index.

This is the html code that i am working on.

<div style="bottom: 0px;" id="mybar">
  <div style="display: block;" class="carousel" id="my-carousel">
    <a href="javascript:" class="carousel-control next listbar"
rel="next" ></a>
    <a href="javascript:" class="prev listbar" rel="prev"> </a>
    <div class="my-middle-part" id="my-middle">
      <ul id="my-items">
        // this list elements should be quite more to see the problem
        <li id="drop_367" class="item" style="">
          <div class="item"><div class="ref">First</div><div
title="delete" class="delete">x</div></div>
          <a title="click to see details" ><div
class="notes">Wonderful</div></a>
        </li>
      </ul>
    </div>
  </div>
</div>

carousel:
new Carousel($('my-middle'), $('my-items').childElements(), $('my-
carousel').select('a.listbar'), {
                        duration: 0.5,
                        transition: 'spring',
                        visibleSlides: parseInt($('my-middle').getWidth()/$$('li.item')
[0].getWidth()),
                        circular: false});

sortable:
Sortable.create('my-items', {
                tag:'li',
                containment:['my-items''],
                constraint:false,
                overlap:'horizontal',
                dropOnEmpty:true,
                ghosting:false
        });

Need some suggestions..

Thanks in advance