Javascript ลากและวางสำหรับอุปกรณ์ระบบสัมผัส [ปิด]

ฉันกำลังมองหาปลั๊กอินลากและวางที่ใช้งานได้กับอุปกรณ์ระบบสัมผัส

ฉันต้องการฟังก์ชันที่คล้ายกันกับปลั๊กอิน jQuery UIซึ่งช่วยให้องค์ประกอบ "droppable"

jqtouch ปลั๊กอินสนับสนุนการลาก แต่ไม่ลดลง

นี่คือการลากและวางที่รองรับเฉพาะ iPhone / iPad

ใครช่วยชี้ทิศทางของปลั๊กอินลากและวางที่ทำงานบน Android / iOS ได้ไหม

... หรืออาจเป็นไปได้ที่จะอัปเดตปลั๊กอิน jqtouch เพื่อความสามารถในการถ่ายโอนข้อมูลมันทำงานบน Andriod และ IOS แล้ว

ขอบคุณ!

คุณสามารถใช้ Jquery UI เพื่อลากและวางด้วยไลบรารีเพิ่มเติมที่แปลเหตุการณ์ของเมาส์ให้เป็นการสัมผัสซึ่งเป็นสิ่งที่คุณต้องการไลบรารีที่ฉันแนะนำคือ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);
}

และในเอกสารของคุณแล้วเพียงแค่เรียกใช้ฟังก์ชัน init ()

พบรหัสจาก ที่นี่

สำหรับใครก็ตามที่ต้องการใช้สิ่งนี้และคงฟังก์ชัน "คลิก" ไว้ (ตามที่ 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" ตามด้วย "สัมผัส" อย่างรวดเร็วเพื่อจำลองการคลิก

ขอบคุณสำหรับรหัสด้านบน! - ฉันลองใช้หลายตัวเลือกและนี่คือตั๋ว ฉันมีปัญหาในการที่ PreventDefault ป้องกันการเลื่อนบน iPad - ตอนนี้ฉันกำลังทดสอบรายการที่ลากได้และใช้งานได้ดีจนถึงตอนนี้

if (event.target.id == 'draggable_item' ) {
    event.preventDefault();
}

ฉันมีวิธีแก้ปัญหาเดียวกับคำตอบของ gregpressแต่รายการที่ลากได้ของฉันใช้คลาสแทนรหัส ดูเหมือนว่าจะได้ผล

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

กระทู้เก่ารู้แล้ว .......

ปัญหาเกี่ยวกับคำตอบของ @ryuutatsuo คือมันบล็อกอินพุตหรือองค์ประกอบอื่น ๆ ที่ต้องตอบสนองต่อ 'การคลิก' (เช่นอินพุต) ดังนั้นฉันจึงเขียนวิธีแก้ปัญหานี้ โซลูชันนี้ช่วยให้สามารถใช้ไลบรารีการลากและวางที่มีอยู่ซึ่งอิงตามเหตุการณ์การเลื่อนลงมูสมูฟและเมาส์อัพบนอุปกรณ์สัมผัสใด ๆ (หรือคัมพิเตอร์) นอกจากนี้ยังเป็นโซลูชันข้ามเบราว์เซอร์

ฉันได้ทดสอบในอุปกรณ์หลายเครื่องและทำงานได้รวดเร็ว (ร่วมกับคุณสมบัติการลากและวางของ ThreeDubMedia (ดูเพิ่มเติมที่http://threedubmedia.com/code/event/drag )) เป็นโซลูชัน jQuery เพื่อให้คุณสามารถใช้กับ jQuery libs เท่านั้น ฉันใช้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;
}; 

ให้ประโยชน์อะไร: ในตอนแรกจะแปลเหตุการณ์การสัมผัสเพียงครั้งเดียวเป็นเหตุการณ์ของเมาส์ ตรวจสอบว่าเหตุการณ์เกิดจากองค์ประกอบบน / ในองค์ประกอบที่ต้องลากไปรอบ ๆ หรือไม่ หากเป็นองค์ประกอบอินพุตเช่นอินพุตพื้นที่ข้อความ ฯลฯ จะข้ามการแปลหรือหากมีการแนบเหตุการณ์เมาส์มาตรฐานเข้าด้วยก็จะข้ามการแปลไปด้วย

ผลลัพธ์: ทุกองค์ประกอบในองค์ประกอบที่ลากได้ยังคงทำงานอยู่

ขอให้มีความสุขในการเขียนโปรแกรมทักทาย Erwin Haantjes