2015-06-12 114 views
0

關於jQuery的可拖動(在jQuery的UI一個巨大的圖書館)jQuery的鼠標按下回調函數(如回調的回調)

我發現這個替代片段用谷歌搜索:

https://gist.github.com/Arty2/11199162

萬一鏈接死亡這裏是代碼:

(function($) { 
    if (!jQuery().draggable) { 
     $.fn.draggable = function() { 
      this 
       .css('cursor', 'move') 
       .on('mousedown touchstart', function(e) { 
        var $dragged = $(this); 

        var x = $dragged.offset().left - e.pageX, 
         y = $dragged.offset().top - e.pageY, 
         z = $dragged.css('z-index'); 

        if (!$.fn.draggable.stack) { 
         $.fn.draggable.stack = 999; 
        } 
        stack = $.fn.draggable.stack; 

        $(window) 
         .on('mousemove.draggable touchmove.draggable', function(e) { 
          $dragged 
           .css({'z-index': stack, 'transform': 'scale(1.1)', 'transition': 'transform .3s', 'bottom': 'auto', 'right': 'auto'}) 
           .offset({ 
            left: x + e.pageX, 
            top: y + e.pageY 
           }) 
           .find('a').one('click.draggable', function(e) { 
            e.preventDefault(); 
           }); 

          e.preventDefault(); 
         }) 
         .one('mouseup touchend touchcancel', function() { 
          $(this).off('mousemove.draggable touchmove.draggable click.draggable'); 
          $dragged.css({'z-index': stack, 'transform': 'scale(1)'}) 
          $.fn.draggable.stack++; 
         }); 

        e.preventDefault(); 
       }); 
      return this; 
     }; 
    } 
})(jQuery); 

看起來像它缺少jquery-ui的熟悉事件:start,movestop。我正在想辦法將其添加到代碼中。我想;對每個月底的回調

'mousedown touchstart'      //this.start() 
'mousemove.draggable touchmove.draggable' //this.drag() 
'mouseup touchend touchcancel'    //this.stop() 

喜歡的東西

this.start=function(){/*do whatever*/}; 
this.drag=function(){/*do whatever*/}; 
this.stop=function(){/*do whatever*/}; 

但是,我怎麼會去傳入通過回調的事件?

.on('mousedown touchstart', function(e, callback) { //that would not work! 

我只是不知道怎樣才能做一個參考this.start(),因爲它不縫對我來說,這些事件可以建立一個正常的回調函數。 我的想法是; mousedown的事件函數是一個自己的回調函數,所以似乎我不得不通過第二次回調,這將導致draggable.start

如何將動態回調傳遞給事件函數?


我發現這個庫http://draggabilly.desandro.com/其中有事件開始拖動停止。

但我還是真的想知道如果我可以通過一個事件..動態傳遞一個回調

回答

0

NPM安裝https://www.npmjs.com/package/draggy

然後用--s browserify使變量可見和醜化來縮小,如果你想它小

browserify draggy/index.js --s Draggable | uglifyjs -c > draggy.js 

然後在客戶端HTML

<srcipt type="text/javascript" src="draggy.js"></script> 

,然後使用該變量在腳本

Draggable(document.getElementById('whatever'));//could also add options, but whatever.. 

:d