2011-05-18 49 views
1

我不想使用jQuery UI,所以我試圖自己製作一個jQuery拖動腳本。jQuery Drag只能在Chrome中運行

這基本上是我的水平Dragging功能代碼:

var down = false; 

$('#itemToMove').mousedown(function(e){ 
    down = true; 
    left = event.pageX - $(this).offset().left; 
}); 

$(document).mouseup(function(){ 
    down = false; 
}); 

$(document).mousemove(function(e){ 
    if(down){ 
     var X = event.pageX - left; 
     $('#itemToMove').css({ 
      left: X 
     }); 
    } 
}); 

我的作品在Chrome只是真棒,但不會在其他瀏覽器(試過KHTML,三叉戟和壁虎)。 有人能告訴我爲什麼嗎?

+0

什麼是「鏈接」? – lonesomeday 2011-05-18 06:50:59

+0

是否留有全局變量?在這個片段中沒有定義。你不能使用jQuery可拖動插件嗎? – 2011-05-18 06:56:11

+1

似乎你使用'e'和'event'作爲事件對象? – sje397 2011-05-18 07:25:52

回答

1

我非常抱歉,如果您在mousedown事件處理程序中放置警報(「」),它將永遠不會觸發。這是因爲當你嘗試將事件處理程序綁定到對象的mousedown事件時,對象(你的div)還不存在。嘗試在

$(文件)。就緒包裝你的整個代碼塊(函數(){ // 您的代碼在這裏 });

事情是這樣的:

var down = false; 
    var left = 0; 

    $(document).ready(function() 
     { 
     $('#itemToMove').mousedown(function(e) 
      { 
      down = true; 
      left = e.pageX - $(this).offset().left; 
      }); 

     $(document).mouseup(function() 
      { 
      down = false; 
      }); 

     $(document).mousemove(function(e) 
      { 
      if(down) 
       { 
       var X = e.pageX - left; 
       $('#itemToMove').css(
        { 
        left: X 
        }); 
       } 
      }); 
     }); 

希望它能幫助:]

補充:此外,請確保您通過這個文件脫脂:http://api.jquery.com/ready,特別是以下部分:

注:請確保所有樣式表都包含在您的腳本之前(尤其是調用ready函數的那些樣式表) 。這樣做將確保在jQuery代碼開始執行之前,所有元素屬性都已正確定義。不這樣做會導致零星的問題,尤其是在基於WebKit的瀏覽器(如Safari)上。

+0

謝謝,但我已經把腳本放到了ready函數中。樣式表和DOM在實際JavaScript之前呈現。 – iWeb 2011-05-18 12:13:23

+0

好吧,如果你仔細觀察,我實際上在發佈之前將你的活動重新命名爲e,只是忘了提及它:]乾杯 – MolestedRabbit 2011-05-19 08:07:22