javascript - and - HTML拖放在移動設備上



html5 drag and drop (5)

當您使用JavaScript(例如jQuery UI可拖放和可拖放)將JavaScript拖放到網頁中時,如何​​在通過移動設備上的瀏覽器查看時如何使其工作 - 拖動的觸摸屏操作被手機滾動頁面等?

所有解決方案歡迎...我最初的想法是:

  1. 為移動設備提供一個按鈕,用於“抬起”要拖動的項目,然後讓它們單擊要放置該項目的區域。

  2. 編寫一個應用程序,為移動設備執行此操作,而不是嘗試讓網頁在其上工作!

  3. 請提供您的建議和意見。

更新:賞金

如果有人能告訴我如何在移動設備的網頁上進行拖放工作,而不訴諸上面的第1點和第2點,我會用你的方式揮舞50代表的美妙賞金!


Answer #1

Jquery Touch Punch非常棒,但它也會禁用可拖動div上的所有控件,所以為了防止出現這種情況,您必須更改這些行......(在編寫時 - 第75行)

更改

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

讀書

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

為想要“解鎖”的每個元素添加盡可能多的元素,

希望能幫助別人


Answer #2

jQuery UI Touch Punch只是解決了這一切。

這是一個支持jQuery UI的觸摸事件。 基本上,它只是將觸摸事件連接回jQuery UI。 通過iPad,iPhone,Android和其他支持觸摸的移動設備進行測試。 我用jQuery UI排序,它的作用就像一個魅力。

http://touchpunch.furf.com/


Answer #3

你也可以嘗試一下Tim Ruffle的drag-n-drop polyfill ,與Bernardo Castilho的一樣(見@remdevtec答案)。

只需執行npm install mobile-drag-drop --save (其他可用的安裝方法,例如使用bower)

然後,任何依靠觸摸檢測的元素界面都應該在移動設備上工作(例如,只拖動一個元素,而不是同時滾動和拖動)。


Answer #4

我需要創建一個拖放和旋轉,適用於台式機,手機,包括Windows Phone在內的平板電腦。 最後一個使它更複雜(mspointer與觸摸事件)。

解決方案來自偉大的Greensock圖書館

它花了一些時間來使同一個對象可以拖動和旋轉,但它完美地工作


Answer #5

這裡是我的解決方案:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});




mobile-devices