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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ฺB - ไม่สามารถเพิ่มข้อมูลที่อยู่ของบริษัทลูกค้าใน การออกใบ Quotations ได้
โดย watcharin พฤ 16 ส.ค. 2018 11:41 am บอร์ด M.D.Soft Co.,Ltd. - Tester
0
2
พฤ 16 ส.ค. 2018 11:41 am โดย watcharin
งานที่ต้องทำประจำวันที่ 16 สิงหาคม 2561
โดย tai14 พฤ 16 ส.ค. 2018 10:25 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
2
5
พฤ 16 ส.ค. 2018 11:34 am โดย AePongsak
งานประจำวันที่ 16 สิงหาคม 2561
โดย prakon พฤ 16 ส.ค. 2018 10:22 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
4
พฤ 16 ส.ค. 2018 10:23 am โดย prakon
งานประจำวันที่ 16 สิงหาคม 2561
โดย pprn พฤ 16 ส.ค. 2018 10:22 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
2
พฤ 16 ส.ค. 2018 10:22 am โดย pprn
งานประจำวันที่ 16 สิงหาคม 2561
โดย Lamduan พฤ 16 ส.ค. 2018 10:20 am บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
1
พฤ 16 ส.ค. 2018 10:20 am โดย Lamduan
งานประจำวันที่ 16 สิงหาคม 2561
โดย tatiya พฤ 16 ส.ค. 2018 10:00 am บอร์ด M065 - ตติยะ นาชัย
0
2
พฤ 16 ส.ค. 2018 10:00 am โดย tatiya
G - หลักการส่งข้อมูล ให้ทาง PHP รู้ว่ามี การอัพเดด stock onhand
โดย mindphp พฤ 16 ส.ค. 2018 1:52 am บอร์ด สิริกิตติรัตน์ - Developer
0
3
พฤ 16 ส.ค. 2018 1:52 am โดย mindphp
การใช้ฟังก์ชัน Filter_list
โดย anuwat somsakul พ 15 ส.ค. 2018 6:10 pm บอร์ด PHP Knowledge
0
10
พ 15 ส.ค. 2018 6:10 pm โดย anuwat somsakul
Test ระบบ Open Erp 99
โดย Lamduan พ 15 ส.ค. 2018 6:09 pm บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
8
พ 15 ส.ค. 2018 6:09 pm โดย Lamduan
วิธีอัด vdo หน้าจอด้วย Camtasia Studio
โดย tai14 พ 15 ส.ค. 2018 4:49 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
11
พ 15 ส.ค. 2018 4:49 pm โดย tai14
สอบถามวิธีการปิด .gitignore ใน netbean ไม่ให้อัพขึ้น git ค่ะ
โดย pprn พ 15 ส.ค. 2018 4:44 pm บอร์ด Programming - PHP
1
17
พ 15 ส.ค. 2018 4:55 pm โดย tsukasaz
มาทำความรู้จักกับ self ใน Python กัน
โดย tatiya พ 15 ส.ค. 2018 3:26 pm บอร์ด Python Knowledge
0
8
พ 15 ส.ค. 2018 3:26 pm โดย tatiya
Q - เพิ่มช่องค้นหาแล้ว error: Call to a member function getGroup() on null
โดย Parichat พ 15 ส.ค. 2018 3:01 pm บอร์ด Joomla Dev
1
4
พ 15 ส.ค. 2018 3:17 pm โดย Parichat
วิธีเปลี่ยนโทนสีของภาพด้วย Photoshop
โดย tai14 พ 15 ส.ค. 2018 1:10 pm บอร์ด Graphic design
1
16
พ 15 ส.ค. 2018 3:00 pm โดย mindphp
สอบถามวิธีที่ทำให้ภาพที่แสกนเสร็จไม่เด้งขึ้นมาเองค่ะ
โดย taemmynatchapon พ 15 ส.ค. 2018 12:00 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
7
พ 15 ส.ค. 2018 12:00 pm โดย taemmynatchapon
วิธีเพิ่มความคมชัดให้ภาพด้วย Photoshop
โดย tai14 พ 15 ส.ค. 2018 11:01 am บอร์ด Graphic design
0
10
พ 15 ส.ค. 2018 11:01 am โดย tai14
ตัวช่วยในการใส่ลายน้ำให้กับรูปภาพด้วย Plugin MD Watermark ใน Joomla
โดย Parichat พ 15 ส.ค. 2018 10:44 am บอร์ด PHP News
0
10
พ 15 ส.ค. 2018 10:44 am โดย Parichat
PHP:Convert Function รวมฟังก์ชันแปลงเลขฐาน
โดย anuwat somsakul พ 15 ส.ค. 2018 10:32 am บอร์ด PHP Knowledge
0
10
พ 15 ส.ค. 2018 10:32 am โดย anuwat somsakul
งานที่ต้องทำประจำวันที่ 15 สิงหาคม 2561
โดย tai14 พ 15 ส.ค. 2018 10:29 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
13
พ 15 ส.ค. 2018 7:40 pm โดย tai14
งานประจำวันที่ 15 สิงหาคม 2561
โดย Lamduan พ 15 ส.ค. 2018 10:26 am บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
1
8
พ 15 ส.ค. 2018 7:17 pm โดย Lamduan