Drag&Drop не пашет помогите, я нуб, нужен совет
 

пытаюсь создать сролинг для фитра по цене никак не выходит толком сделать перемещение обьектов, обьект не успевает передвигаться за мышью, и есть косяк с минимальным и максимальным его позиционированием, может кто нить че нить подскажет хотя бы логику верную

вот наработки скрипта:

jQuery.fn.filter = function(options){

  var options = jQuery.extend({
//    containerID : 'filter',
	minCen : '0',
    maxCen : '10000',
    widthContainer: '195',
    heightContainer: '40'  
  },options);

  return this.each(function() {
      if(options.widthContainer || options.heightContainer){
         jQuery(this).width(options.widthContainer+"px");
         jQuery(this).height(options.heightContainer+"px");
      };


      var g = 'general';
      var i = 'internal';
      var l = 'left_button';
      var r = 'right_button';
      var p = 'progress';
      var h = jQuery(this).height();
      var dx = 0;
      var max = 0; 
      jQuery(this).prepend('<div id="'+g+'" style="height:'+h+'px;border:1px solid;background-color:#DADADA"><div id="'+i+'"><div id="'+p+'"></div><div id="'+l+'" ></div><div id="'+r+'"></div></div></div>');
      jQuery('#'+i+' > div').css('position','relative');
      jQuery("#"+i).css({height:h/2+'px',top:h/4 ,position:'relative', left:'5px', right:'5px', width:jQuery("#"+i).width()-10+'px'});
      jQuery("#"+p).css({height:h/4,top:jQuery("#"+i).height()/4,'background-color':'red'});
      jQuery("#"+l).css({float:'left',left:'0px',height:jQuery("#"+i).height(),width:jQuery("#"+i).height()/4,bottom:jQuery("#"+i).height()/2,'background-color':'#000'});
      jQuery("#"+r).css({float:'right',right:'0px',height:jQuery("#"+i).height(),width:jQuery("#"+i).height()/4,bottom:jQuery("#"+i).height()/2,'background-color':'#000'});

      jQuery("#"+l).mousedown(function(t){
                
           dx=t.clientX - parseInt(jQuery("#"+l).css("left"));
           max=parseInt(jQuery("#"+p).css('width'))-((parseInt(jQuery("#"+r).css('right')))+(parseInt(jQuery("#"+r).css('width')))+(parseInt(jQuery("#"+l).css('width'))));
           jQuery(this).css("background","#444444");
           jQuery(document).bind("mousemove",function(e){
               var left = e.clientX - dx;
                   if(max > left && left > 0){
                       $("#"+l).css("left",left+'px');
                   }
            });
      });
      jQuery("#"+g).mouseup(function(){
           jQuery(document).unbind('mousemove');
           jQuery("#"+l+", #"+r).css("background","#000");
      });
      
  });

};

вызов производиться вот так:

$('#filter').filter();

где #filter див в котором будет размещен скролинг

заранее всем благодарен