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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามเกี่ยวกับการตั้งค่า Jabber phpBB3.2.x
โดย AePongsak จ 22 ม.ค. 2018 5:54 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
8
จ 22 ม.ค. 2018 5:54 pm โดย AePongsak
เสือชีตาห์ Vs โปรแกรมเมอร์
โดย Before Dong จ 22 ม.ค. 2018 11:14 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
19
จ 22 ม.ค. 2018 11:31 am โดย Before Dong
งานประจำวันที่ 22 มกราคม 2561
โดย Parichat จ 22 ม.ค. 2018 9:57 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
7
จ 22 ม.ค. 2018 7:20 pm โดย Parichat
งานประจำวันที่ 22 มกราคม 2561
โดย Four จ 22 ม.ค. 2018 9:48 am บอร์ด MT22 - อิษยา งามสอาด
1
32
จ 22 ม.ค. 2018 11:23 am โดย Four
งานประจำวันที่ 22 มกราคม 2561
โดย Jom07 จ 22 ม.ค. 2018 9:47 am บอร์ด MT23 - สุพรรษา พูลตา
2
19
จ 22 ม.ค. 2018 11:01 am โดย AePongsak
งานประจำวันที่ 19 มกราคาม 2561
โดย Parichat ศ 19 ม.ค. 2018 8:52 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
8
ศ 19 ม.ค. 2018 7:33 pm โดย Parichat
งานประจำวันที่ 19 มกราคม 2561
โดย Jom07 ศ 19 ม.ค. 2018 8:43 am บอร์ด MT23 - สุพรรษา พูลตา
1
26
ศ 19 ม.ค. 2018 9:20 am โดย Jom07
งานประจำวันที่ 19 มกราคม 2561
โดย Four ศ 19 ม.ค. 2018 8:42 am บอร์ด MT22 - อิษยา งามสอาด
4
25
ศ 19 ม.ค. 2018 6:43 pm โดย Four
ตัวแปรชนิด Tuple
โดย Four พฤ 18 ม.ค. 2018 5:18 pm บอร์ด Python Knowledge
0
35
พฤ 18 ม.ค. 2018 5:18 pm โดย Four
ขอสอบถามเรื่องความแตกต่างของฟังก์ชั่นvariant_pow()กับฟังก์ชั่น pow()
โดย Parichat พฤ 18 ม.ค. 2018 1:58 pm บอร์ด Programming - PHP
0
31
พฤ 18 ม.ค. 2018 1:58 pm โดย Parichat
อยากได้โปรแกรม command แบบ cmd ที่เก็บ history ได้ค่ะช่วยเเนะนำหน่อย
โดย thatsawan พฤ 18 ม.ค. 2018 11:18 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
60
พฤ 18 ม.ค. 2018 7:18 pm โดย thatsawan
0vsNULL
โดย Before Dong พฤ 18 ม.ค. 2018 10:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
45
พฤ 18 ม.ค. 2018 2:51 pm โดย Before Dong
งานประจำวันที่ 18 มกราคม 2561
โดย Parichat พฤ 18 ม.ค. 2018 9:38 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
14
พฤ 18 ม.ค. 2018 7:16 pm โดย Parichat
งานประจำวันที่ 18 มกราคม 2561
โดย Jom07 พฤ 18 ม.ค. 2018 9:27 am บอร์ด MT23 - สุพรรษา พูลตา
2
34
พฤ 18 ม.ค. 2018 6:49 pm โดย Before Dong
งานประจำวันที่ 18 มกราคม 2561
โดย Four พฤ 18 ม.ค. 2018 9:24 am บอร์ด MT22 - อิษยา งามสอาด
1
23
พฤ 18 ม.ค. 2018 11:44 am โดย Four
VDO สอนพัฒนา Componet Joomla ภาษาอังกฤษ By Mindphp Developer Team
โดย mindphp พฤ 18 ม.ค. 2018 6:21 am บอร์ด Joomla Development
0
33
พฤ 18 ม.ค. 2018 6:21 am โดย mindphp
Ozio Gallery-Components & Plugins สำหรับช่วยให้ดูภาพที่เผยแพร่บน Googleและวีดีโอจาก Youtube ที่ละเอียด
โดย Parichat พ 17 ม.ค. 2018 7:30 pm บอร์ด Joomla Extension Review
0
54
พ 17 ม.ค. 2018 7:30 pm โดย Parichat
ตัวดำเนินการของตัวแปร List
โดย Four พ 17 ม.ค. 2018 4:35 pm บอร์ด Python Knowledge
0
36
พ 17 ม.ค. 2018 4:35 pm โดย Four
การใช้ Del statement
โดย Four พ 17 ม.ค. 2018 4:03 pm บอร์ด Python Knowledge
0
33
พ 17 ม.ค. 2018 4:03 pm โดย Four
Review Applications 17 มกราคม 2561
โดย Jom07 พ 17 ม.ค. 2018 3:44 pm บอร์ด MT23 - สุพรรษา พูลตา
1
18
พ 17 ม.ค. 2018 6:19 pm โดย Jom07