drag and click

https://github.com/mmikowski/jquery.event.ue

注意要保持又能拖 又能触发点击事件，需要把插件中的preventDefault()去掉

    $(function(){
        var $udrag    = $('.cruise_sec ul'); //楼层区域jquery对象
        var 
            container_length = 572, //可移动区域的容器的宽度
            show_num,//被拖动的区域对应的船公司下展示的邮轮数量
            totle_length,//能被拖动的区域的总长度
            max_drag_left_distance,//最大能拖动的距离
            px_drag_left, //距左边的位移 
            drag_able = false,//是否可以拖拽
            scroll_top; //拖动时距顶部的距离
        
    

         /**
         * [onDragstart 拖拽开始]
         * @param  {[type]} event [description]
         * @return {[type]}       [description]
         */
        onDragstart = function (event){
          scroll_top = $('body').scrollTop();

          show_num     = parseInt($(this).attr('attr-num'));
          if(show_num>3){
            drag_able = true;
          }else{
            drag_able = false;
            return false;
          }
          totle_length = show_num*175 - 15;
          px_drag_left = parseInt($(this).css('left'));
          max_drag_left_distance = totle_length - container_length;
        }
        /**
         * [onDragmove 拖拽中]
         * @param  {[type]} event [description]
         * @return {[type]}       [description]
         */
        onDragmove = function (event){
            

          console.log('dragmove');
          var 
            $this = $(this),offset_map;
           
          //可拖动区域初始位移
          if(px_drag_left === undefined){
            // offset_map = $this.offset(); 
            px_drag_left = 0 ;
          }
          //可拖动区域位移随着拖动距离变化
          px_drag_left += event.px_delta_x  ;
          scroll_top   -= event.px_delta_y  ;
          //可拖动区域位移限制
          if(px_drag_left < 0 - max_drag_left_distance){
            px_drag_left = 0 - max_drag_left_distance;
          }else if(px_drag_left >= 0){
            px_drag_left = 0;
          }
          //页面滚动设置
          $('body').scrollTop(scroll_top);

          if(!drag_able){
            return;
          }
          //可拖动区域位移设置
          $this.css({left : px_drag_left });


        }
        /**
         * [setDistanceToLeft 设置可拖拽的楼层区域距左边的位移]
         * @param {[type]} sel_num   [被选中的层数在 floor_arr 中对应的下标]
         * @param {[type]} floor_arr [description]
         * @param {[type]} other_num [楼层区域初始状态下距容器左边的楼层数]
         */
        function setDistanceToLeft(sel_num,floor_arr,other_num){
          drag_num = -sel_num + other_num;   //距左边的的li个数
          px_drag_left = drag_num * li_width;
          $udrag.css({left : px_drag_left });
        }
        /**
         * [onDragend 拖拽结束]
         * @param  {[type]} event [description]
         * @return {[type]}       [description]
         */
        onDragend = function (event){
          if(!drag_able){
            return;
          }
        }

        $udrag.on( 'udragstart', onDragstart )
              .on( 'udragmove',  onDragmove  )
              .on( 'udragend',   onDragend   );

        $udrag.find('li').on('click',function(){
          sel_num = getKeyFromVal(floor_arr,parseInt($(this).text()));
          setDistanceToLeft(sel_num,floor_arr,other_num);
          setSelFloorColorAndShow(sel_num,floor_arr);
          ChangeDeckImg(sel_num,floor_arr);
          console.log($(this).text());
          console.log('1')
        });

    });