ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 5  drag and drop
   drag and drop คือการคลิกที่วัตถุค้างเอาไว้ แล้วลากไปวางยังพื้นที่ ที่ต้องการ โดยการลากไปวางนั้นวัตถุจะเคลื่อนที่ตามเคอร์เซอร์เมาส์ไปด้วย จนกว่าเราจะปล่อยมือจากการคลิกเมาส์ วัตถูก็จะมาอยู่ที่ตำแหน่งใหม่ ซึ่งการ drag and drop จะช่วยให้เราสามารถย้ายวัตถุได้อย่างอิสระตามต้องการ
ตัวอย่าง

<html>
<head>
<style type="text/css">
#div1 {width:350px;height:200px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{ev.preventDefault();}

function drag(ev)
{ev.dataTransfer.setData("Text",ev.target.id);}

function drop(ev)
{ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}
</script>
</head>
<body>

<p>Drag the Koala image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://images.temppic.com/20-10-2012
/images_vertis/1350706157_0.24874200.jpg" draggable="true" ondragstart="drag(event)" width="300" height="180">

</body>
</html>

ผลลัพธ์คือ

จากตัวอย่าง
1. เราสามารถลากภาพโคอาล่า ไปใส่ในกรอบสี่เหลี่ยมได้ ด้วยแท็กนี้
และหากเราต้องการล๊อกภาพให้อยู่กับที่ไม่ให้ย้ายไปย้ายมาได้ ก้ให้เปลี่ยนจากคำว่า true เป็น false

<img draggable="true"> 

2.แท็กใส่รูปภาพ ที่ต้องการให้ลากได้

<img id="drag1" src="/ ใส่ URL ของภาพ " 

3.ตรงนี้จะเป็น การสร้างกรอบสำหรับวางภาพ ในตัวอย่างนี้ ยาว 350 พิกเซล และ กว้าง 200 พิกเซล มีเส้นกรอบหนา 1 พิกเซล
และมีคำว่า  function allowDrop(ev)  ซึ่งหมายถึงยอมให้ภาพสามารถวางที่จุดนี้ได้

<style type="text/css">
#div1 {width:350px;height:200px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)

ข้อมูลอ้างอิง
http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการบันทึกข้อมูลหลายตารางพร้อมกัน
โดย champp พฤ 07 พฤษภาคม 2020 3:39 pm บอร์ด PHP Knowledge
0
1714
พฤ 07 พฤษภาคม 2020 3:39 pm โดย champp
B - รายชื่อผู้สมัครใหม่ ไม่มีชื่อขึ้นที่หน้าเว็บ
โดย mindphp พฤ 07 พฤษภาคม 2020 10:32 am บอร์ด Odoojob.com - Tester
1
11
ศ 08 พฤษภาคม 2020 7:23 pm โดย tsukasaz
R - เครียร์ข้อมูลทดสอบ ออกจากหน้าเว็บ
โดย mindphp พฤ 07 พฤษภาคม 2020 10:24 am บอร์ด OdooJob.com - Developer
0
1
พฤ 07 พฤษภาคม 2020 10:24 am โดย mindphp
เกษตรกรปลูกพืชเตรียมรับเงินเยียวยา มีขั้นตอนตรวจดังนี้
โดย thatsawan อ 05 พฤษภาคม 2020 5:20 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
112
พ 06 พฤษภาคม 2020 7:53 pm โดย arenaofblood
B - หน้า Resumes ใน admin แสดง ID ผิด
โดย tsukasaz อ 05 พฤษภาคม 2020 2:59 pm บอร์ด Odoojob.com - Tester
0
2
อ 05 พฤษภาคม 2020 2:59 pm โดย tsukasaz
อัพเดทแบบดับเบิล! Joomla เวอร์ชั่น 3.9.17 กับ 3.9.18
โดย tsukasaz อ 05 พฤษภาคม 2020 2:18 pm บอร์ด MindPHP News & Feedback
0
108
อ 05 พฤษภาคม 2020 2:18 pm โดย tsukasaz
แนะนำเทคนิคการเล่นกีฬา หัวข้อแบตมินตัน
โดย champp อ 05 พฤษภาคม 2020 12:43 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
45
อ 05 พฤษภาคม 2020 12:43 pm โดย champp
แนวทางสร้าง การจัดเก็บแบบระบุตำแหน่ง
โดย tanapong จ 04 พฤษภาคม 2020 11:41 pm บอร์ด Programming - PHP
4
88
พ 13 พฤษภาคม 2020 8:38 pm โดย tanapong
TIP การใช้ SSL ของ cloudflare คู่กับ Let's Encrypt
โดย mindphp ส 02 พฤษภาคม 2020 8:17 pm บอร์ด Linux - Web Server
0
182
ส 02 พฤษภาคม 2020 8:17 pm โดย mindphp
กรมส่งเสริมการเกษตรเปิด "โครงการตู้เย็นข้างบ้านต้านภัย COVID-19" สนับสนุนเมล็ดพันธุ์พืชผักสวนครัวให้แก่เกษตรกรและประชาชน
โดย thatsawan ส 02 พฤษภาคม 2020 2:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
119
ส 02 พฤษภาคม 2020 2:58 pm โดย thatsawan
วิธีการจัดรูปแบบเลขบัตรประชาชนที่กรอกอัตโนมัติ
โดย Ittichai_chupol ศ 01 พฤษภาคม 2020 5:48 pm บอร์ด Jquery & Ajax Knowledge
0
212
ศ 01 พฤษภาคม 2020 5:48 pm โดย Ittichai_chupol
ปัญหา Deprecated: Function ereg() is deprecated ereg_replace()
โดย mindphp ศ 01 พฤษภาคม 2020 2:54 am บอร์ด Programming - PHP
1
1016
ศ 01 พฤษภาคม 2020 4:35 am โดย mindphp
ประวัติความเป็นมาการแข่งเรือยาว
โดย baitoeijr1230 พฤ 30 เม.ย. 2020 9:39 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
178
พฤ 30 เม.ย. 2020 9:39 pm โดย baitoeijr1230
วิธีการใช้งานตัว flask jwt เพื่อทำการ authenticate แบบใช้ Token ด้วย curl
โดย jirawoot พฤ 30 เม.ย. 2020 7:07 pm บอร์ด Python Knowledge
0
158
พฤ 30 เม.ย. 2020 7:07 pm โดย jirawoot
สร้าง slideshow หรือภาพสไลด์หน้าเว็บด้วย Module Product Slide ของ MooZiiCart
โดย prmindphp พ 29 เม.ย. 2020 6:34 pm บอร์ด MindPHP News & Feedback
0
77
พ 29 เม.ย. 2020 6:34 pm โดย prmindphp
วิธีการ Overrite การแจ้งเตือนเพื่อนำมาปรับแต่งใน Extension ของ phpbb
โดย Ittichai_chupol อ 28 เม.ย. 2020 7:01 pm บอร์ด PHP Knowledge
0
197
อ 28 เม.ย. 2020 7:01 pm โดย Ittichai_chupol
จะเขียน py ธรรมดาอ่านไฟล์ config ทำยังไงค่ะ
โดย thatsawan อ 28 เม.ย. 2020 4:42 pm บอร์ด Programming - C/C++ & java & Python
1
120
พฤ 30 เม.ย. 2020 11:00 am โดย jirawoot
ต้องการติดตั้ง psycopg2 ในเครื่อง windows 10 ยังไงค่ะ
โดย thatsawan อ 28 เม.ย. 2020 3:23 pm บอร์ด Programming - C/C++ & java & Python
11
177
อ 28 เม.ย. 2020 4:01 pm โดย thatsawan
ต้องการรันไฟล์ python 2.7 ที่ติดตั้งไว้เเล้ว ทำยังไงค่ะ
โดย thatsawan อ 28 เม.ย. 2020 2:20 pm บอร์ด Programming - C/C++ & java & Python
2
107
อ 28 เม.ย. 2020 3:12 pm โดย thatsawan
ตัวช่วยในการค้นหาสินค้าตามหมวดหมู่และค้นหาจากคีย์เวิร์ด Module Ajax Search ของ MooZiiCart
โดย prmindphp จ 27 เม.ย. 2020 6:58 pm บอร์ด MindPHP News & Feedback
0
78
จ 27 เม.ย. 2020 6:58 pm โดย prmindphp