讓jQuery拖放到iPad上工作

我有一些用jQuery編寫的自定義拖放，並希望能夠在iPad上做同樣的操作。讓jQuery拖放到iPad上工作

這裏是我的代碼

$('.item').draggable({ 
     opacity:0.7, 
     helper:'clone', 
     cursorAt:{ 
      top:0, 
      left:0 
     } 
    }); 

$('.selected-plan').droppable({ 
     drop:queryBuilder.drop, 
     opacity:0.1, 
     hoverClass:'item-arrived' 
    });

現在，我做了一些研究，擡頭@http://popdevelop.com/2010/08/touching-the-web/並提出了一些變化，比如只爲阻力，測試它，但它似乎沒有工作

$.('.item').draggable = function() { 
    var offset = null; 
    var start = function(e) { 
    var orig = e.originalEvent; 
    var pos = $(this).position(); 
    offset = { 
     x: orig.changedTouches[0].pageX - pos.left, 
     y: orig.changedTouches[0].pageY - pos.top 
    }; 
    }; 
    var moveMe = function(e) { 
    e.preventDefault(); 
    var orig = e.originalEvent; 
    $(this).css({ 
     top: orig.changedTouches[0].pageY - offset.y, 
     left: orig.changedTouches[0].pageX - offset.x 
    }); 
    }; 
    this.bind("touchstart", start); 
    this.bind("touchmove", moveMe); 
};

我也看過http://code.google.com/p/jquery-ui-for-ipad-and-iphone/，但找不到方法來更改我的代碼以適應它並使其工作。

任何幫助！

來源

2012-03-22 Vivek

我曾經使用過映射touchevents到mouseevents來啓用在觸摸設備上的拖放（jQuery UI的draggable）。像這樣工作：

function touchHandler(event) { 
    var touches = event.changedTouches; 
    var first = touches[0]; 
    var type = ""; 

    switch (event.type) { 
    case "touchstart": 
     type = "mousedown"; 
     break; 
    case "touchmove": 
     type = "mousemove"; 
     break; 
    case "touchend": 
     type = "mouseup"; 
     break; 
    default: 
     return; 
    } 

    //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //   screenX, screenY, clientX, clientY, ctrlKey, 
    //   altKey, shiftKey, metaKey, button, relatedTarget); 
    var simulatedEvent = document.createEvent("MouseEvent"); 
    simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0 /*left*/ , null); 

    first.target.dispatchEvent(simulatedEvent); 
    event.preventDefault(); 
}

的處理程序，然後你會喜歡映射的事件：

document.addEventListener("touchstart", touchHandler, true); 
document.addEventListener("touchmove", touchHandler, true); 
document.addEventListener("touchend", touchHandler, true); 
document.addEventListener("touchcancel", touchHandler, true);

有了做，你可以只在一個「鼠標驅動」環境中使用這樣的事件映射。

工作正常，雖然它當然有點有限，因爲你失去了多重接觸的東西。

來源

2012-03-22 15:48:51 m90

這是真棒，很好，但現在點擊按鈕/ datepicker不工作，任何解決方案？ – Vivek 2012-03-23 12:19:56

@livingtolearn它不應該弄亂點擊，至少它沒有當我用它。你是否將觸碰事件綁定到有問題的元素？ – m90 2012-03-23 12:38:22

類型，因爲一旦元素被拖放，我將元素添加到文本框或日期選擇器，現在我試圖註釋掉preventDefault（）和點擊工作，但在iPad上整個屏幕也會移動:( – Vivek 2012-03-23 13:21:47

我們使用javascript函數elementFromPoint來替換mouseOver一次，當元素匹配時您可以進行調用。

來源

2012-03-22 15:59:46 Mace

讓jQuery拖放到iPad上工作

回答

相關問題