ตัวเลื่อน jQuery UI บนอุปกรณ์สัมผัส

ฉันกำลังพัฒนาเว็บไซต์โดยใช้ jQuery UI และมีองค์ประกอบหลายอย่างในไซต์ของฉันที่ดูเหมือนจะไม่เข้ากันเมื่อดูบนอุปกรณ์หน้าจอสัมผัส พวกเขาไม่ก่อให้เกิดข้อผิดพลาดใด ๆ แต่พฤติกรรมไม่ใช่สิ่งที่ควรจะเป็น

องค์ประกอบที่เป็นปัญหาคือแถบเลื่อนและตัวเลื่อนช่วงตามที่กำหนดโดย jQuery UI บนหน้าจอสัมผัสแทนที่จะลงทะเบียนการสัมผัสเหมือนการหยิบที่จับและการลากในขณะที่ลากแฮนเดิลข้ามแถบเลื่อนเพียงแค่เลื่อนหน้าเว็บทั้งหมดไปที่ด้านข้างของหน้าจอ ใช้งานได้ถ้าคุณแตะที่จับแล้วแตะตำแหน่งบนแถบเลื่อนที่คุณต้องการให้แฮนเดิลสิ้นสุดลง แต่มันช้ามากและไม่เหมาะ ความคิดใด ๆ ?

ฉันลองดาวน์โหลดปลั๊กอิน jqtouch จากนั้นเชื่อมต่อ.touch([...])กับการโทรทั้งหมดไปยัง slider () และ rangelider () แต่ไม่ได้ผล

ขอบคุณ!

อัปเดต: ฉันพบ "แพทช์" นี้ในเว็บไซต์ jQuery UI

http://bugs.jqueryui.com/ticket/4143

ที่บอกว่ามันอำนวยความสะดวกในการเลื่อนบน iPhone แต่ตอนนี้มีคำถามโง่ ๆ อีกอย่าง: ฉันจะรวม "โปรแกรมแก้ไข" นี้เข้ากับรหัสของฉันได้อย่างไร? ฉันเพิ่งรวมไว้ที่จุดเริ่มต้นของรหัสเช่นปลั๊กอินหรือไม่?

ห้องสมุดนี้มีสิ่งที่คุณกำลังมองหา:

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

นอกจากนี้ยังมีโค้ดตัวอย่างการใช้งาน (เพียงเพิ่มปลั๊กอิน):

<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>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
  $('#widget').draggable();
</script>

แค่อยากจะเพิ่มข้อมูลใหม่เกี่ยวกับเรื่องนี้ Touch-punch จะทำงานได้ดีสำหรับ Ipads และอุปกรณ์ Android แต่แถบเลื่อนจะไม่ทำงานบนอุปกรณ์พกพา Windows เท่าที่ฉันสามารถทดสอบได้ (ด้วย jquery ui & Touch punch เวอร์ชันล่าสุด)

การแก้ไขนั้นค่อนข้างง่ายเพียงเพิ่มกฎ CSS ต่อไปนี้ใน .ui-slider-handle:

-ms-touch-action: none;
touch-action: none;

หวังว่านี่จะช่วยได้

ตามที่ @dazbradbury แนะนำไลบรารีtouchpunchสามารถช่วยแปลเหตุการณ์ของเมาส์เพื่อสัมผัสเหตุการณ์ได้ พารามิเตอร์ใน. draggable () จำกัด การเคลื่อนที่ของแถบเลื่อนดังนั้นจึงไม่สามารถเคลื่อนย้ายเกินพาเรนต์ของตัวเลื่อนได้

<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>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

แก้ไข:หากคุณใช้แถบเลื่อน Jquery UI อยู่แล้วคุณจะต้องรวมไลบรารี touchpunch เท่านั้น อย่าเรียก. draggable () สำหรับ .ui-slider-handle เพราะจะเขียนทับฟังก์ชันการทำงานที่มีอยู่

ผมมีปัญหาเหมือนกัน. ฉันได้พัฒนาการสร้าง UI ของตัวเลื่อนที่ซับซ้อนบนแถบเลื่อนของ jQuery UI เพื่อให้รู้ว่ามันใช้ไม่ได้เลยบนมือถือ ฉันลองทำตามคำแนะนำที่ระบุไว้ที่นี่ แต่เนื่องจากฉันมีโซลูชันแบบกำหนดเองที่ใช้ jQuery UI Slider เท่านั้นจึงไม่ได้ผล

เพียงแค่ใช้noUiSlider

มันทำคุณสมบัติที่ซับซ้อนทั้งหมด (และอื่น ๆ อีกมากมาย) เหมือนกับที่ฉันสร้างไว้ด้านบนของแถบเลื่อน jQuery UI ทำงานได้อย่างสวยงามบนอุปกรณ์พกพาและยังจัดแต่งทรงผมได้ง่าย