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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
เข้าเฟสบุคไม่ได้
โดย บุคคลทั่วไป พ 23 ส.ค. 2017 6:52 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
10
พ 23 ส.ค. 2017 6:52 pm โดย บุคคลทั่วไป
Machine Learning คืออะไร
โดย nuattawoot พ 23 ส.ค. 2017 4:28 pm บอร์ด Share Knowledge
0
11
พ 23 ส.ค. 2017 4:28 pm โดย nuattawoot
Data Mining (ดาต้า ไมน์นิ่ง) เหมืองข้อมูล
โดย nuattawoot พ 23 ส.ค. 2017 3:15 pm บอร์ด Share Knowledge
0
10
พ 23 ส.ค. 2017 3:15 pm โดย nuattawoot
ผมแก้ไขไฟล์ Index.php ไม่ได้ครับ ใน Joomla
โดย Before Dong อ 22 ส.ค. 2017 4:04 pm บอร์ด Joomla Development
2
21
อ 22 ส.ค. 2017 4:04 pm โดย Before Dong
mdfiles version 1.0.31 สร้างแบบฟอร์มเอกสาร แนบไฟล์ไม่ได้ครับ
โดย Chinamon Sang อ 22 ส.ค. 2017 9:56 am บอร์ด Joomla Development
0
15
อ 22 ส.ค. 2017 9:56 am โดย Chinamon Sang
สอบถามวิธีการย้ายตำแหน่งปุ่ม input file ใน JavaScript
โดย Ik Kat จ 21 ส.ค. 2017 3:36 pm บอร์ด JavaScript & Jquery Ajax
0
24
จ 21 ส.ค. 2017 3:36 pm โดย Ik Kat
การเขียนโปรแกรมภาษาซี 5 ฟังก์ชัน
โดย Tong Ratika จ 21 ส.ค. 2017 9:59 am บอร์ด Programming - PHP
1
28
จ 21 ส.ค. 2017 9:59 am โดย P'Eak
เข้าเฟสไม่ได้
โดย สิ่งเดียวคือ เธอน่ะ อ 20 ส.ค. 2017 8:09 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
25
อ 20 ส.ค. 2017 8:09 pm โดย สิ่งเดียวคือ เธอน่ะ
ศัพท์ปัญญาประดิษฐ์ (AI) ที่ ที่ทางราชบัณฑิตยสถาน
โดย Oh_nO อ 20 ส.ค. 2017 3:58 am บอร์ด Microsoft Office Knowledge & line & Etc
0
31
อ 20 ส.ค. 2017 3:58 am โดย Oh_nO
การใช้คำสั่ง find_element_by_tag_name ของ selenium ในการเปิด tag ใหม่ของเว็บไซต์
โดย บัวบุญ จันทะโคตร ส 19 ส.ค. 2017 6:15 pm บอร์ด Python Knowledge
0
20
ส 19 ส.ค. 2017 6:15 pm โดย บัวบุญ จันทะโคตร
ช่วยด้วยครับ dreamweaver เมนูตารางด้านซ้ายชอบเลื่อนลงเมื่อใส่รูปหรือข้อความด้านขวา
โดย cmchamping ส 19 ส.ค. 2017 4:38 pm บอร์ด Programming - PHP
0
25
ส 19 ส.ค. 2017 4:38 pm โดย cmchamping
ใช้โปรแกรม dreamweaver สร้างเว็บ ตารางเมนู ชอบเลื่
โดย cmchamping ส 19 ส.ค. 2017 4:27 pm บอร์ด Programming - PHP
1
24
ส 19 ส.ค. 2017 4:27 pm โดย mindphp
อยากรู้ วิธีดู... หรือเอา รูป logo .... จาก หน้าเว็บที่กำหนด path รูปไว้ใน css
โดย Before Dong ส 19 ส.ค. 2017 4:14 pm บอร์ด HTML CSS
2
36
ส 19 ส.ค. 2017 4:14 pm โดย Before Dong
Css ปรับ Logo บอร์ด phpbbthailand.com
โดย mindphp ส 19 ส.ค. 2017 3:54 pm บอร์ด phpbbthailand.com
0
4
ส 19 ส.ค. 2017 3:54 pm โดย mindphp
อัพเดดความคืบหน้า
โดย mindphp ส 19 ส.ค. 2017 3:52 pm บอร์ด phpbbthailand.com
0
2
ส 19 ส.ค. 2017 3:52 pm โดย mindphp
ช่วยบอกลิงค์ที่โหลด MJ Upgrad joomla V1.5 เป็น V3.7
โดย บุคคลทั่วไป ส 19 ส.ค. 2017 10:24 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
38
ส 19 ส.ค. 2017 10:24 am โดย บุคคลทั่วไป
การนำเอา regex มาใช้ใน selenium
โดย บัวบุญ จันทะโคตร ศ 18 ส.ค. 2017 5:39 pm บอร์ด Python Knowledge
0
21
ศ 18 ส.ค. 2017 5:39 pm โดย บัวบุญ จันทะโคตร
อยากทราบแนวทางการสร้าง selenium ให้คลิ๊กลิ้งค์ต่อจากหน้า text link ที่คลิ๊กมา นั้นจะต้องเช่นไรครับ
โดย บัวบุญ จันทะโคตร ศ 18 ส.ค. 2017 4:33 pm บอร์ด Programming - C/C++ & java & Python
0
32
ศ 18 ส.ค. 2017 4:33 pm โดย บัวบุญ จันทะโคตร
ช่วยหน่อยครับ mdfile ไม่สามารถสร้าง categiries ได้
โดย Chinamon Sang ศ 18 ส.ค. 2017 9:09 am บอร์ด Joomla Development
6
65
ศ 18 ส.ค. 2017 9:09 am โดย Chinamon Sang
Joomla ออกเวอร์ชั่น 3.7.5 Fix Bug ติดตั้ง Joomla ไม่ได้เมือใช้ remote ฐานข้อมูล
โดย mindphp ศ 18 ส.ค. 2017 3:23 am บอร์ด PHP News
1
35
ศ 18 ส.ค. 2017 3:23 am โดย toonytoony2004