Not able to set CSS attribute after draggable drag event
<p>We are developing a jQuery plugin that creates a DIV with multiple "columns" inside it.  As the user scrolls the DIV, the scroll will "snap" to the column edge.  I have created a jsFiddle which demonstrates this.  Scroll the box to the right until it snaps to the end of column 1.  <a href="http://jsfiddle.net/vcYjm/3/" rel="nofollow">http://jsfiddle.net/vcYjm/3/</a></p>

<p>Here's the problem.  As the user drags the scroll handle, we update the scroll position of the columns with this code at the of the <em>drag</em> code block:</p>

<pre><code>$('.'+snapHolder).css('right', snapScrollPos+'px');
</code></pre>

<p>That works fine when the page is initially loaded, but once there is any other setting of the position attributes, it stops working.  For example, reload the jsFiddle, then click on the link <em>"set $('.snapHolder').css('left', '-50px')"</em>.  The drag will no longer work.  Similarly, if you scroll until the first snap, the scroll no longer works.</p>

<p>Here is the bit of code which fires in the snap zone before the column:</p>

<pre><code>if ( colOffset &gt; (colWidth - snapSize) &amp;&amp; colOffset &lt; colWidth ) {
        inAfter = false;
        if (!inBefore) {
            inBefore = true;                
            console.log("before");
            $('.'+snapHolder).css('left', '-' + fullWidth*(colNum+1) + 'px');
            $handle.parents(':eq(2)').find('.'+dragHandle).css({'left': leftPosition});
        }
    }
</code></pre>

<p>and after the column:</p>

<pre><code>} else if ( colOffset &lt; snapSize ) {
    inBefore = false;
    if (!inAfter) {
        inAfter = true;
        console.log("after");
        $('.'+snapHolder).css('left', '-' + fullWidth*colNum + 'px');
        $handle.parents(':eq(2)').find('.'+dragHandle).css({'left': leftPosition});
    }
}
</code></pre>
