ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 18 ตุลาคม 2561
โดย tai14 พฤ 18 ต.ค. 2018 10:04 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
1
พฤ 18 ต.ค. 2018 10:04 am โดย tai14
VDO - วิธีการแปลงไฟล์ไพธอนเป็นไฟล์ .exe
โดย prakon พฤ 18 ต.ค. 2018 10:04 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
1
พฤ 18 ต.ค. 2018 10:04 am โดย prakon
งานประจำวันที่ 18 ตุลาคม 2561
โดย prakon พฤ 18 ต.ค. 2018 10:00 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
2
พฤ 18 ต.ค. 2018 10:00 am โดย prakon
งานประจำวันที่ 18 ตุลาคม 2561
โดย nice_13 พฤ 18 ต.ค. 2018 9:55 am บอร์ด M071 - พิชญ์สินี คงจร
0
1
พฤ 18 ต.ค. 2018 9:55 am โดย nice_13
เเนะนำเรียนต่อต่างประเทศ
โดย Anonymous พ 17 ต.ค. 2018 10:09 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
พ 17 ต.ค. 2018 10:09 pm โดย บุคคลทั่วไป
Q - สอบถามวิธีการเแปลงไฟล์ Python เป็นไฟล์ .exe ครับ
โดย prakon พ 17 ต.ค. 2018 7:37 pm บอร์ด Programming - C/C++ & java & Python
0
9
พ 17 ต.ค. 2018 7:37 pm โดย prakon
VDO - รีวิว Module Manufacturer สำหรับแสดงผู้ผลิตสินค้า
โดย pprn พ 17 ต.ค. 2018 6:55 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
5
พ 17 ต.ค. 2018 6:55 pm โดย pprn
R - mdsoft_translate_posts ปรับเปลี่ยนแทมเพลตและภาษา
โดย Ittichai_chupol พ 17 ต.ค. 2018 6:34 pm บอร์ด ThaiVI - Developer
0
6
พ 17 ต.ค. 2018 6:34 pm โดย Ittichai_chupol
VDO - รีวิว Module Bestseller (โมดูล เบสต์เซลเลอร์) สำหรับแสดงสินค้าขายดี
โดย pprn พ 17 ต.ค. 2018 6:29 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
6
พ 17 ต.ค. 2018 6:29 pm โดย pprn
R - mdsoft_show_member_post การแสดงข้อมูลของสมาชิก
โดย Ittichai_chupol พ 17 ต.ค. 2018 6:27 pm บอร์ด ThaiVI - Developer
0
1
พ 17 ต.ค. 2018 6:27 pm โดย Ittichai_chupol
VDO - รีวิว Module currency (โมดูล เคอเร็นซิ) สำหรับเลือกสกุลเงินของสินค้า
โดย pprn พ 17 ต.ค. 2018 5:43 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
5
พ 17 ต.ค. 2018 5:43 pm โดย pprn
VDO - รีวิว Module Latest products (โมดูล เลทเอ็ซท์ โปรดักส์) สำหรับแสดงสินค้าล่าสุด
โดย pprn พ 17 ต.ค. 2018 4:49 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
6
พ 17 ต.ค. 2018 4:49 pm โดย pprn
เมื่อหัดเขียนเว็บไซต์ครั้งแรก
โดย tai14 พ 17 ต.ค. 2018 4:39 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
7
พ 17 ต.ค. 2018 4:39 pm โดย tai14
B - สรุป Review เว็บไซต์ zirishoes.com
โดย tsukasaz พ 17 ต.ค. 2018 12:14 pm บอร์ด สิริกิตติรัตน์ - Tester
1
12
พ 17 ต.ค. 2018 1:16 pm โดย mindphp
ขออนุญาตสอบถามครับ ผมมือใหม่
โดย 9kitti พ 17 ต.ค. 2018 11:25 am บอร์ด Programming - PHP
1
11
พ 17 ต.ค. 2018 12:18 pm โดย thatsawan
R - mdsoft_search_share (ค้นหาข้อมูลหุ้น)
โดย Ittichai_chupol พ 17 ต.ค. 2018 11:23 am บอร์ด ThaiVI - Developer
0
12
พ 17 ต.ค. 2018 11:23 am โดย Ittichai_chupol
R - Extension_Search_Share
โดย Ittichai_chupol พ 17 ต.ค. 2018 10:56 am บอร์ด M070 - อิทธิชัย ชูผล
0
5
พ 17 ต.ค. 2018 10:56 am โดย Ittichai_chupol
งานประจำวันที่ 17 ตุลาคม 2561
โดย prakon พ 17 ต.ค. 2018 10:19 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
15
พ 17 ต.ค. 2018 7:12 pm โดย prakon
งานประจำวันที่ 17 ตุลาคม 2561
โดย pprn พ 17 ต.ค. 2018 10:18 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
13
พ 17 ต.ค. 2018 7:22 pm โดย pprn
งานประจำวันที่ 17 ตุลาคม 2561
โดย tai14 พ 17 ต.ค. 2018 9:46 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
3
พ 17 ต.ค. 2018 7:08 pm โดย tai14