jQuery - iPad/iPhone上的可拖動圖像 - 如何集成event.preventDefault（）;？

我使用jQuery，jQuery UI和jQuery mobile爲iPhone/iPad構建Web應用程序。現在我創建圖像，他們應該是可拖動的，所以我這樣做：jQuery - iPad/iPhone上的可拖動圖像 - 如何集成event.preventDefault（）;？

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
     <title>Drag - Test</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script> 
    </head> 
    <body> 
    <div> 
     <div style="width:500px;height:500px;border:1px solid red;"> 
      <img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/200px-JQuery_logo.svg.png" class="draggable" alt="jQuery logo" /> 
      <img src="http://upload.wikimedia.org/wikipedia/en/a/ab/Apple-logo.png" class="draggable" alt="Apple Inc. logo" /> 
     </div> 
    </div> 
</body> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".draggable").draggable(); 
    }); 
</script> 
</html>

在這裏你可以看到活生生的例子：http://jsbin.com/igena4/

的問題是，整個頁面要滾動。我搜索在蘋果的HTML5例子，發現這個以防止頁面滾動，使圖像可拖動：

... 
onDragStart: function(event) { 
    // stop page from panning on iPhone/iPad - we're moving a note, not the page 
    event.preventDefault(); 
    ... 
}

但問題是我，我怎麼能包括到我的jQuery的呢？我在哪裏得到event？

最好的問候。

來源

2010-12-20 Tim

試試這個庫

https://github.com/furf/jquery-ui-touch-punch

只要遵循這些簡單的步驟，以確保您的jQuery的 UI應用程序的觸摸事件：
在你的頁面中包含jQuery和jQuery UI 。
<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> 
在jQuery UI之後及第一次使用之前包括Touch Punch。

請注意，如果您使用的是jQuery UI的組件，Touch Punch必須包含在jquery.ui.mouse.js之後，因爲Touch Punch 會修改其行爲。
<script src="jquery.ui.touch-punch.min.js"></script> 
毫無3.只需使用jQuery UI的預期，看着它在手指觸摸的工作。
<script>$('#widget').draggable();</script> 

來源

2012-01-15 22:15:17 JE42

+1的一部分，提到這一點，我用這個工作了很多，並與jQuery UI很好的工作。 – 2012-06-12 13:06:49

這太酷了。它只是工作！剛剛在Opera Mobile，Firefox/Fennec和諾基亞N9默認瀏覽器上測試過。在這3個只有Fennec有點笨重（但仍然有效）。看到這裏的例子： http://m.enux.pl/_tests/jui/demos/droppable/photo-manager.html – Nux 2012-09-19 17:42:44

對我很好工作 – Yarin 2012-12-28 17:10:36

我想這會是這樣的

$(document).bind("dragstart", function(event, ui){ 
    event.preventDefault(); 
    //return false;//edited 
    });

我不知道是否應該document或只是'body'

編輯

我不知道你在哪裏從該代碼示例，但它似乎總是阻止任何拖動。嘗試如果這有幫助 - 它應該防止冒泡，所以如果滾動與文檔節點一起工作 - 事件不應該到達那裏。 [我還是不能試穿蘋果]

$(document).ready(function() { 
     $(".draggable").draggable(); 
     $('body>div').bind("dragstart", function(event, ui){ 
     event.stopPropagation(); 
     }); 
    });

來源

2010-12-20 10:16:24 naugtur

兩個不工作，請參閱http://jsbin.com/igena4/2/和http://jsbin.com/igena4/3/我不會在iPad和我的工作不能用鼠標拖動正常的瀏覽器。 – Tim 2010-12-20 10:27:29

好的。你能鏈接到你發現你應該將preventDefault綁定到onDragStart的信息嗎？您可能需要將其綁定到特定的事物，或者它是誤導性的。我沒有觸摸屏設備，所以我無法通過試驗和錯誤來實現。 – naugtur 2010-12-20 11:01:55

嘗試不返回false。我認爲這太過分了。 – naugtur 2010-12-20 11:09:10

你應該簡單地去看看jquery的文檔http://jqueryui.com/demos/draggable/#events

您回調開始事件應該是鉤，當你調用拖動方法，與每其他jQuery，總是有一個參數，你可以傳遞一個包含回調的對象。嘗試在啓動回調中調用preventDefaut。

$("#draggable").draggable({ 
     start: function(e) { 
      e.preventDefault(); 
      counts[ 0 ]++; 
      updateCounterStatus($start_counter, counts[ 0 ]); 
     }, 
     drag: function() { 
      counts[ 1 ]++; 
      updateCounterStatus($drag_counter, counts[ 1 ]); 
     }, 
     stop: function() { 
      counts[ 2 ]++; 
      updateCounterStatus($stop_counter, counts[ 2 ]); 
     } 
    });

來源

2010-12-21 16:10:08

我已經這樣做了：'start：function（event）{event.preventDefault（）; }'但是沒有用 - 沒有鼠標拖動，沒有手指拖動。 – Tim 2010-12-21 16:40:04

它看起來是用jqueryUI來做到這一點的方法，你只需要擺弄這個。添加更多的'preventDefault's在這裏和那裏，嘗試停止冒泡在不同的事件... – naugtur 2010-12-22 07:44:51

你嘗試用一個手指拿着Ipad滾動和用另一個手指（另一隻手）拖動？我經常在網站上使用這個技巧，它有一個滾動div ... – 2010-12-23 18:27:09

我發現這是工作在桌面瀏覽器和iOS的Safari在iPad和iPhone的解決方案： http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

你只需要下載和集成的JavaScript文件，僅此而已。

來源

2011-01-03 13:24:05 Tim

很高興能夠找到修復程序到底是什麼，因爲它肯定會應用到那裏。 – naugtur 2011-01-04 14:38:46

我認爲這是用幾個preventDefaults完成的。我沒有深入瞭解代碼，首先我很高興它正在工作:-) – Tim 2011-01-05 09:30:22

哇，我知道你不是第一個有這個問題:) – 2011-01-11 19:45:30

jQuery 1.9將爲您做到這一點。

下面是鋼筋混凝土的鏈接：http://blog.jqueryui.com/2012/08/jquery-ui-1-9-rc/

來源

2011-08-30 18:56:16 thatmiddleway

如果該文件仍然存在，會很好D： – Mobilpadde 2012-07-15 16:45:21

現在你可以在這裏試試jquery 1.9 beta：http://blog.jqueryui.com/2012/06/jquery- ui-1-9-beta/ – thatmiddleway 2012-07-16 14:53:44

+1。：D – Mobilpadde 2012-07-16 18:53:51

jQuery - iPad/iPhone上的可拖動圖像 - 如何集成event.preventDefault（）;？

回答

相關問題