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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เจอปัญหา Forbidden You don't have permission to access /index.php on this server. Additionally, a 403 Forbidden error
โดย mindphp อ 22 ก.ย. 2020 12:58 am บอร์ด Programming - PHP
1
139
อ 22 ก.ย. 2020 7:44 pm โดย mindphp
มาแล้ว!!! MDSMS component สำหรับส่งข้อความผ่านทาง SMS บน Joomla
โดย bolue จ 21 ก.ย. 2020 5:17 pm บอร์ด MindPHP News & Feedback
0
63
จ 21 ก.ย. 2020 5:17 pm โดย bolue
สอบถามเรื่องการอ่านค่าสีสถานะของปุ่ม
โดย blebee90 จ 21 ก.ย. 2020 2:03 pm บอร์ด Programming - C/C++ & java & Python
1
35
จ 21 ก.ย. 2020 3:10 pm โดย mindphp
ต้องการกำหนดรุปแบบของช่องกรอกให้เป็นเเพทเทิร์นของเบอร์โทร เเต่ไม่ต้องการให้กรอกตัวหนังสือ
โดย thatsawan พฤ 17 ก.ย. 2020 3:18 pm บอร์ด JavaScript & Jquery Ajax
5
1147
พ 23 ก.ย. 2020 2:54 pm โดย thatsawan
สถานที่จัดงานแต่งงานชิคๆ แบบไม่ง้อโรงแรม
โดย Anonymous พฤ 17 ก.ย. 2020 2:10 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
48
พฤ 17 ก.ย. 2020 2:10 pm โดย บุคคลทั่วไป
วิธีแก้ ean13 ปัญหาที่เจอคืออะไร แก้ยังไง
โดย bolue พ 16 ก.ย. 2020 6:38 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
45
พ 16 ก.ย. 2020 6:38 pm โดย bolue
สอบวิธีการ check user ว่าเราใช้ user ไหนอยู่ตอนนี้ ได้มั้ยครับ ใน command บน Ubuntu
โดย jirawoot พ 16 ก.ย. 2020 11:25 am บอร์ด Programming - C/C++ & java & Python
3
84
พ 16 ก.ย. 2020 11:52 am โดย mindphp
หน้าเว็บ phpBB เจอปัญหาโหลด 404 บ้างครั้งไม่รู้ว่าเป็นเพราะอะไรได้บ้าง
โดย thatsawan พ 16 ก.ย. 2020 11:17 am บอร์ด Programming - PHP
5
78
อ 22 ก.ย. 2020 1:00 am โดย mindphp
phpBB เป็นโปรแกรมประเภทไหนมาดูกัน
โดย Udomsak2539 อ 15 ก.ย. 2020 6:25 pm บอร์ด phpBB user Guide Knowledge
0
60
อ 15 ก.ย. 2020 6:25 pm โดย Udomsak2539
รวบรวมข้อมูลเบื้องต้น phpBB คืออะไร ฟีเจอร์ และประวัติ
โดย fhakun อ 15 ก.ย. 2020 6:14 pm บอร์ด PHP Knowledge
0
58
อ 15 ก.ย. 2020 6:14 pm โดย fhakun
สอบถาม วิธีเปิดแจ้งเตือน skype ค่ะ
โดย fhakun อ 15 ก.ย. 2020 6:07 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
67
อ 15 ก.ย. 2020 6:07 pm โดย fhakun
ฟีเจอร์พื้นฐานของ phpBB
โดย fhakun อ 15 ก.ย. 2020 5:33 pm บอร์ด PHP Knowledge
0
62
อ 15 ก.ย. 2020 5:33 pm โดย fhakun
สอบถาม วิธีแทรกลิ้งค์ให้ข้อความค่ะ
โดย fhakun อ 15 ก.ย. 2020 4:42 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
5
130
อ 15 ก.ย. 2020 5:05 pm โดย fhakun
สอบถาม วิธีติดตั้ง kazaam ใน ubantu ค่ะ
โดย fhakun อ 15 ก.ย. 2020 3:26 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
7
109
อ 15 ก.ย. 2020 4:38 pm โดย mindphp
ไม่ทราบว่า viewtopic ทำยังไง
โดย Udomsak2539 จ 14 ก.ย. 2020 6:47 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
65
อ 15 ก.ย. 2020 10:06 am โดย Udomsak2539
แนะนำโปรแกรม ibis paint และเครื่องมือตัดต่อง่ายๆใน 1 นาที สำหรับมือใหม่
โดย fhakun จ 14 ก.ย. 2020 6:45 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
71
จ 14 ก.ย. 2020 6:45 pm โดย fhakun
รวมวิธี การเดินจาก สงขลา มา กทม.
โดย Udomsak2539 จ 14 ก.ย. 2020 5:10 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
90
อ 15 ก.ย. 2020 12:14 pm โดย mindphp
ความแตกต่างระหว่างภาษาอังกฤษและภาษาฝรั่งเศส
โดย fhakun จ 14 ก.ย. 2020 5:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
47
จ 14 ก.ย. 2020 5:03 pm โดย fhakun
วิธีเดินทางจากเมืองทองมาเกษตร
โดย fhakun จ 14 ก.ย. 2020 3:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
60
จ 14 ก.ย. 2020 3:03 pm โดย fhakun
พิมพ์ข้อความเว็บบอร์ด แล้วกดไปโดยเว็บบอร์ดที่โชว์ในรูปแบบโทรศัพท์ทำยังไง
โดย Udomsak2539 จ 14 ก.ย. 2020 2:59 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
65
จ 14 ก.ย. 2020 3:05 pm โดย tsukasaz