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

注意要保持又能拖 又能觸發(fā)點(diǎn)擊事件查排，需要把插件中的preventDefault()去掉

    $(function(){
        var $udrag    = $('.cruise_sec ul'); //樓層區(qū)域jquery對(duì)象
        var 
            container_length = 572, //可移動(dòng)區(qū)域的容器的寬度
            show_num,//被拖動(dòng)的區(qū)域?qū)?yīng)的船公司下展示的郵輪數(shù)量
            totle_length,//能被拖動(dòng)的區(qū)域的總長(zhǎng)度
            max_drag_left_distance,//最大能拖動(dòng)的距離
            px_drag_left, //距左邊的位移 
            drag_able = false,//是否可以拖拽
            scroll_top; //拖動(dòng)時(shí)距頂部的距離
        
    

         /**
         * [onDragstart 拖拽開(kāi)始]
         * @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;
           
          //可拖動(dòng)區(qū)域初始位移
          if(px_drag_left === undefined){
            // offset_map = $this.offset(); 
            px_drag_left = 0 ;
          }
          //可拖動(dòng)區(qū)域位移隨著拖動(dòng)距離變化
          px_drag_left += event.px_delta_x  ;
          scroll_top   -= event.px_delta_y  ;
          //可拖動(dòng)區(qū)域位移限制
          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;
          }
          //頁(yè)面滾動(dòng)設(shè)置
          $('body').scrollTop(scroll_top);

          if(!drag_able){
            return;
          }
          //可拖動(dòng)區(qū)域位移設(shè)置
          $this.css({left : px_drag_left });


        }
        /**
         * [setDistanceToLeft 設(shè)置可拖拽的樓層區(qū)域距左邊的位移]
         * @param {[type]} sel_num   [被選中的層數(shù)在 floor_arr 中對(duì)應(yīng)的下標(biāo)]
         * @param {[type]} floor_arr [description]
         * @param {[type]} other_num [樓層區(qū)域初始狀態(tài)下距容器左邊的樓層數(shù)]
         */
        function setDistanceToLeft(sel_num,floor_arr,other_num){
          drag_num = -sel_num + other_num;   //距左邊的的li個(gè)數(shù)
          px_drag_left = drag_num * li_width;
          $udrag.css({left : px_drag_left });
        }
        /**
         * [onDragend 拖拽結(jié)束]
         * @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')
        });

    });