javascript - sortable - jquery ui下載




JavaScript拖放觸摸設備 (4)

對於任何希望使用此功能並保持“點擊”功能的人(正如John Landheer在他的評論中提到的那樣),只需進行一些修改即可完成:

添加幾個全局變量:

var clickms = 100;
var lastTouchDown = -1;

然後將switch語句從原始語句修改為:

var d = new Date();
switch(event.type)
{
    case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
    case "touchmove": type="mousemove"; lastTouchDown = -1; break;        
    case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
    default: return;
}

您可能需要根據自己的口味調整'clickms'。 基本上它只是在觀察一個'touchstart',然後通過'touchend'來模擬點擊。

我正在尋找一款適用於觸控設備的拖拽式DROP插件。

我希望類似於jQuery UI插件的功能,它允許“可拖拽”元素。

jqtouch插件支持拖動,但不會丟失。

Here是僅支持iPhone / iPad的拖放。

任何人都可以在拖放插件的方向指向我的android / ios?

...或者可能更新jqtouch插件的droppability,它已經在Andriod和IOS上運行。

謝謝!


您可以使用Jquery用戶界面進行拖放操作,並附帶一個將鼠標事件轉換為觸摸的庫,這是您需要的,我推薦的庫是https://github.com/furf/jquery-ui-touch-punch ,與這從Jquery UI拖放應該在觸摸設計上工作

或者你可以使用我正在使用的這段代碼,它也可以將鼠標事件轉換為觸摸,並且像魔術一樣工作。

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

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

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

並且在你的document.ready中調用init()函數

代碼從Here找到


我知道老線程.......

問題與@ryuutatsuo的答案是,它也阻止任何輸入或其他元素,必須對'點擊'作出反應(例如輸入),所以我寫了這個解決方案。 該解決方案可以使用任何基於任何觸摸設備(或cumputer)上的mousedown,mousemove和mouseup事件的現有拖放庫。 這也是一個跨瀏覽器的解決方案。

我已經在幾個設備上進行了測試,它的工作速度很快(與ThreeDubMedia的拖放功能結合使用(另請參閱http://threedubmedia.com/code/event/drag ))。 這是一個jQuery解決方案,因此您只能在jQuery庫中使用它。 我使用過jQuery 1.5.1 ,因為一些較新的函數無法在IE9及更高版本中正常工作 (未使用新版本的jQuery進行測試)。

將任何拖放操作添加到事件之前,必須先調用此函數

simulateTouchEvents(<object>);

您還可以使用以下語法阻止所有組件/子項的輸入或加速事件處理:

simulateTouchEvents(<object>, true); // ignore events on childs

這是我寫的代碼。 我使用了一些不錯的技巧來加速評估事物(參見代碼)。

function simulateTouchEvents(oo,bIgnoreChilds)
{
 if( !$(oo)[0] )
  { return false; }

 if( !window.__touchTypes )
 {
   window.__touchTypes  = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
   window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
 }

$(oo).bind('touchstart touchmove touchend', function(ev)
{
    var bSame = (ev.target == this);
    if( bIgnoreChilds && !bSame )
     { return; }

    var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
        e = ev.originalEvent;
    if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type]  )
     { return; } //allow multi-touch gestures to work

    var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
        b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false;

    if( b || window.__touchInputs[ev.target.tagName] )
     { return; } //allow default clicks to work (and on inputs)

    // https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
    var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
    newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
            touch.screenX, touch.screenY,
            touch.clientX, touch.clientY, false,
            false, false, false, 0, null);

    touch.target.dispatchEvent(newEvent);
    e.preventDefault();
    ev.stopImmediatePropagation();
    ev.stopPropagation();
    ev.preventDefault();
});
 return true;
}; 

它的作用:首先,它將單點觸摸事件轉換為鼠標事件。 它檢查事件是否由必須拖動的元素上/上的元素引起。 如果它是input,textarea等input元素,它會跳過翻譯,或者如果標準鼠標事件附加到它,它也會跳過翻譯。

結果:可拖動元素上的每個元素仍在工作。

Happy code,greetz,Erwin Haantjes


我與gregpress的答案有相同的解決方案,但我的可拖動項目使用一個類而不是一個id。 它似乎工作。

var $target = $(event.target);  
if( $target.hasClass('draggable') ) {  
    event.preventDefault();  
}




touch