การทำให้รูปภาพสามารถย้ายตำแหน่งได้
ปกติรูปที่อยู่ในเว็บ จะไม่สามารถเลื่อนตำแหน่งได้โดยการคลิกเมาส์แล้วลากไปไหนมาไหน ( drag ) แต่ที่จะพูดถึงในตอนนี้ เป็นการทำอย่างนั้นครับ

ผมไปได้ javascript ตัวนี้มาจากเว็บ
//www.walterzorn.com/dragdrop/dragdrop_e.htm


แล้วขั้นตอนการทำก็มีดังนี้
1. ตั้งชื่อให้กับรูปที่เราจะให้มันเกิดการลากได้ โดยใส่ name เข้าไปในรูป เช่น
<img name="name1" src="อะไรสักอย่าง.jpg" width="240" height="135">

2. เราเอา script จากในเว็บ ไปไว้ที่ไหนซักที่แล้วก็เรียกเอาดังนี้

<script type="text/javascript" src="//ที่เก็บScript/wz_dragdrop.js"></script>

จากนั้นเราก็ใส่ code นี้ลงไป
<script type="text/javascript">
<!--

SET_DHTML("name1", "name2", "anotherLayer", "lastImage");

//-->


ซึ่งชื่อในวงเล็บ คือชื่อของรูปที่เราต้องการให้มีการ drag and drop ได้
และที่สำคัญอีกอย่างก็คือ เราต้องใส่ code javascript ลงไปหลังจากรูปที่เราตั้งชื่อเอาไว้ ไม่งั้น javascript มันจะ error ครับ

สำหรับเว็บทั่วไป ใส่ได้เลย
สำหรับ bloggang ต้องทำให้ javascript มันเป็นบรรทัดเดียว ไม่งั้นมันจะไม่ทำงานครับ


เพียงเท่านี้ล่ะครับ
รูปของเรา ก็สามารถ drag ได้แล้ว .. ง่ายดีเนอะ
ที่สำคัญคือ ใช้ได้กับทุก browser ด้วยล่ะครับ

นี่คือตัวอย่างของรูปที่ผมทำครับ ... ลองลากมันดูสิครับ .. โว้ววววว

ลองลากรูปไปไหนมาไหนสิครับ


ผมหวังว่าคงเป็นไอเดียในการนำไปประยุกต์ใช้งานกันได้ง่ายๆ นะครับ

ปล.เพิ่มเติม
ถ้าใน IE รูปมันไม่ขึ้น ก็คลิกที่ Link เพื่อดูตัวอย่างนะครับ เป็น Code เดียวกัน แต่ที่ bloggang ไม่ขึ้น ผมล่ะงงจริงๆ เลย แหะ แหะ แหะ
คลิกเพื่อดูตัวอย่างครับ



Create Date : 18 กรกฎาคม 2548
Last Update : 18 กรกฎาคม 2548 0:57:06 น.
Counter : 2993 Pageviews.

37 comments
ชาลีไดอารี่ ... แมวก็มีหัวใจ* ฟ้าใสวันใหม่
(11 ม.ค. 2564 14:18:16 น.)
วัดประจำชาวไทลื้อ SertPhoto
(12 ม.ค. 2564 16:24:39 น.)
4 วัน 3 คืน เที่ยวกระบี่ ดินแดนแห่งธรรมชาติจากผืนป่าสู่ท้องทะเลงาม (ตอนที่ 4: ทัวร์สี่เกาะ+ทะเลแหวก) เจ้าสำนักคันฉ่องวารี
(12 ม.ค. 2564 22:12:33 น.)
✿ ✿ Food For Fun :: Hot Wok Return #55 :: อาหารผู้สูงวัย "แกงจืดผักกาดขาวม้วนไส้หมูสับ" ✿ ✿ เนินน้ำ
(12 ม.ค. 2564 08:30:50 น.)
  
โดย: simple things วันที่: 18 กรกฎาคม 2548 เวลา:0:16:45 น.
  
มองไม่เห็นรูปค่ะ (ใช้ IE)
โดย: pixp วันที่: 18 กรกฎาคม 2548 เวลา:0:30:35 น.
  
ขอบคุณนะ ขอให้จำเริญ จำเริญ รำเพย รำเพย นะพ่อนะ
โดย: 5150_b วันที่: 18 กรกฎาคม 2548 เวลา:0:33:35 น.
  
IE ไม่ขึ้นรูปจริงๆ แฮะ
เดี๋ยวขอเชคแป้บครับ

โดย: กึ่งยิงกึ่งผ่าน วันที่: 18 กรกฎาคม 2548 เวลา:0:41:27 น.
  
รูปยังไม่ขึ้นเลยอ่า
โดย: panumas05 วันที่: 18 กรกฎาคม 2548 เวลา:0:51:43 น.
  
ถ้ารูปไม่ขึ้น ก็คลิกตัวอย่างด้านท้ายของบทความเลยครับ

เพิ่งเพิ่มเข้าไปตะกี้ครับ
โดย: กึ่งยิงกึ่งผ่าน วันที่: 18 กรกฎาคม 2548 เวลา:0:55:43 น.
  
รูป X จังแฮะ
โดย: นู๋เองง่ะ วันที่: 18 กรกฎาคม 2548 เวลา:0:56:28 น.
  
รูปยังไม่ขึ้นเลยจ๊า
โดย: zaesun วันที่: 18 กรกฎาคม 2548 เวลา:0:58:26 น.
  
ใช้ จิ้งจอกไฟครับ ลากได้ 5555 ยอดมากๆ ครับ
โดย: หมื่นทิพ TRAVOLTA (เทพบุตรตบะแตก!! ) วันที่: 18 กรกฎาคม 2548 เวลา:1:31:47 น.
  
เฮ้ย รูปโคตร X เลยอ่ะ เอามาลงแบบนี้ไม่กลัวเด็กเล็กมาเห็นเข้าแล้วเกิดพฤติกรรมเลียนแบบเหรอครับ
โดย: หมาร่าหมาหรอด วันที่: 18 กรกฎาคม 2548 เวลา:4:50:37 น.
  




**อรุณสวัสของเช้าวันใหม่ที่สดใสนะจ้า**


คิดถึง..ห่วงใย..เป็นหนักหนา

อยากรู้ว่ายังคงสบายดีไหม

อยู่ทางนี้ทำได้แค่ส่งใจ

กับความห่วงใยที่ให้เธอ

คิดถึง..ห่วงใยเธอหนักหนา

ให้รู้ว่ารัก..และอาทรเธออยู่เสมอ

ถึงแม้วันใดที่ไม่ได้เจอ

ก็ยังคงคิดถึงเธอทุกทุกวัน
**มีความสุขมากๆๆกับการทำงานและมีความสุขกับครอบครัวด้วยนะจ้า**


ต้องขอโทษคุณ กึ่งยิงกึ่งผ่าน เป็นอย่างสูงด้วยนะจ้าที่เข้าใจผิดเกี่ยวกับเหตุการณ์ที่เกิดขึ้นในครั้งนี้ ..จอมแก่นหวังว่า คงได้รับรอยยิ้มกลับมาจากคุณ กึ่งยิงกึ่งผ่าน นะจ้า
โดย: จอมแก่นแสนซน วันที่: 18 กรกฎาคม 2548 เวลา:6:40:09 น.
  
ขอให้รำเพย รำเพย จำเริญ จำเริญ :P


ตกลงอวยพรใครเนี่ย 555


ปล. รูป X มากๆ เลยอ่า เขิน
โดย: cocoa butter วันที่: 18 กรกฎาคม 2548 เวลา:6:54:53 น.
  
55555รูปxจริงๆด้วย
โดย: prncess วันที่: 18 กรกฎาคม 2548 เวลา:8:28:18 น.
  
รูป x สุดยอดดดดดด



ขอให้พี่จำเริญ จำเริญ รำเพย รำเพย ครับ
[เลียนแบบ ::3:: กับ ::12::]
โดย: GuiLty PLeaSure วันที่: 18 กรกฎาคม 2548 เวลา:9:42:47 น.
  
เก่งจังเลย พ่อคู๊ณ
โดย: เครา IP: 61.91.145.244 วันที่: 18 กรกฎาคม 2548 เวลา:21:07:35 น.
  





**สวัสดีของเช้าวันใหม่ที่สดใสนะจ้า คุณ กึ่งยิงกึ่งผ่าน**



**มีความสุขมากๆๆกับการทำงานและมีความสุขกับครอบครัวด้วยนะจ้า**

โดย: จอมแก่นแสนซน วันที่: 19 กรกฎาคม 2548 เวลา:9:41:25 น.
  
อะจ๊ากส์ รูปเอ็กซ์มั่กๆ ทนดูไม่ได้ น่าลากไปทิ้งเนอะ
โดย: Together In 80s Dream วันที่: 19 กรกฎาคม 2548 เวลา:13:30:36 น.
  
โอ้ว!!! ขอบคุณค่ะ เจ๋ง มะเคยเห็นแบบนี้มาก่อน
โดย: Gryffin วันที่: 20 กรกฎาคม 2548 เวลา:19:45:45 น.
  
หนุกๆๆๆ
โดย: เอ็นสี่ IP: 61.90.104.32 วันที่: 21 กรกฎาคม 2548 เวลา:10:29:13 น.
  
โอ้มด X เจ้าข้าเอ้ย
โดย: eq0 IP: 202.44.14.194 วันที่: 22 กรกฎาคม 2548 เวลา:17:17:04 น.
  
เจ๋งจริงๆ

รูป X อีกตะหาก
โดย: zmen วันที่: 22 กรกฎาคม 2548 เวลา:23:08:37 น.
  
โดย: โอว IP: 203.156.67.113 วันที่: 23 กรกฎาคม 2548 เวลา:20:47:05 น.
  
ขอบคุณค่ะที่นำความรู้มาฝากกัน แบบนี้หลักการเดียวกับเกมส์ที่เค้าใช้ทำต่อจิ๊กซอว์หรือเปล่าคะ?
โดย: coldfusionCF วันที่: 25 กรกฎาคม 2548 เวลา:2:14:26 น.
  
เกมจิ๊กซอว์ที่ทำบนเว็บ มักจะใช้ java applet ครับ
จัดการง่ายกว่าแบบนี้เยอะเลยครับ
โดย: กึ่งยิงกึ่งผ่าน วันที่: 26 กรกฎาคม 2548 เวลา:1:52:25 น.
  
เยี่ยมเลย...ขอบคุณครับ
โดย: **mp5** วันที่: 26 กรกฎาคม 2548 เวลา:17:22:57 น.
  



ขอบคุณค่ะ
หนี่ฯกำลังอยากได้พอดีเลยค่ะ


โดย: หนี่หนีหนี้ วันที่: 26 กรกฎาคม 2548 เวลา:21:52:32 น.
  
รับทราบค่ะ ขอบคุณค่ะ
โดย: coldfusionCF วันที่: 27 กรกฎาคม 2548 เวลา:5:43:32 น.
  
Opera ลากได้แล
ว่างๆ จะแกะ Code เล่น
โดย: Oakyman วันที่: 29 กรกฎาคม 2548 เวลา:8:07:07 น.
  

พี่ครับช่วยอธิบายหรือบอกสคริบ ทำแบล็กกราวแบบอันเต็มหน้าเวบไม่ให้มันกระจาย
แล้วก็วิธีทำแบล็กกราวในคอมเม้นหรือขอlinksที่สอนก็ได้ครับ
ช่วยตอบใน blogผมด้วยมึนไปหมดแล้ว
MyBlogkub
P.s.อยากทำ blogสวยๆแบบพี่ๆมั๊ง
โดย: *-* (Rasia ) วันที่: 3 สิงหาคม 2548 เวลา:2:46:53 น.
  

เก่งจริงคับ ขอให้เก่งยิ่งๆขึ้นนะคับ
เพราะใจดีมาก
โดย: yyswim วันที่: 11 สิงหาคม 2548 เวลา:16:04:20 น.
  
เจ๋งมากครับ ได้ความรู้ไหมอีกแล้ว

จาก ทีมงาน tismarketing.com
บริการ บทความไอทีดีๆ
บริการ ออกแบบจัดทำเว็บไซต์
บริการ โปรโมทเว็บให้ติดหน้าแรกของ Google
บริการ ให้คำปรึกษาด้าน E-marketing

//tismarketing.bloggang.com
โดย: TIS Marketing (tismarketing ) วันที่: 12 กันยายน 2548 เวลา:20:09:59 น.
  
โดย: สมชาย เวียงกลาง IP: 58.147.5.56 วันที่: 2 มิถุนายน 2549 เวลา:8:11:53 น.
  
eytgfvwa87shfgvnwqhg viqwyevb pohw8r bpg0qnekvhwshlgvnoqmn.kjv9mwnedv/,w0avk s;kdjfivsmdijgoemd9fgmwkjegijdkgljsipd
โดย: resdrrf IP: 61.7.233.73 วันที่: 5 มิถุนายน 2549 เวลา:9:48:34 น.
  
071461013
โดย: โชกุน IP: 203.170.228.177 วันที่: 16 มิถุนายน 2549 เวลา:3:40:33 น.
  
รักในหลวง........................................
โดย: สาวิตรี อัดนิมาตร IP: 203.151.140.117 วันที่: 17 มิถุนายน 2549 เวลา:16:45:20 น.
  
รูป x จริงๆ
โดย: min IP: 125.25.11.136 วันที่: 24 มิถุนายน 2549 เวลา:16:40:24 น.
  
คุณกึ่งยิงกึ่งผ่านคะ ถ้าเราต้องการเอาbackground จากแผ่น clipart มาใส่ในบลอกเราจะต้องทำอย่างไรคะ ตอนนี้ไม่ได้ปรับปรุงบลอกให้เป็นรูปแบบที่ต้องการซะที เอารูปการ์ตูนลงในบลอกก็ทำไม่ได้ถ้าจะไปเซฟมาจากของเพื่อนๆแล้วจะเอาลงยังไงล่ะ หรือว่าต้องมี html ตลอดเลยงงมาก อยากรู้เรื่องพวกนี้ต้องเข้าไปดูในไหนคะ เอาแบบที่เป็นภาษาไทยนะคะ ภาษาอังกฤษคงจะอ่านไม่ค่อยเข้าใจ ช่วยหน่อยนะคะ ร้อนใจมากเพราะต้องทำบลอกส่งอาจารย์
ถ้าไม่อยากตอบลงในบลอกส่งมาที่นี่ก็ได้ค่ะ peanut_can@hotmail.com แล้วจะรอคำตอบนะคะ
โดย: peanut_can (peanut_can ) วันที่: 23 สิงหาคม 2549 เวลา:14:52:29 น.
ชื่อ :
Comment :
 *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 

Over.BlogGang.com

กึ่งยิงกึ่งผ่าน
Location :
กรุงเทพ  Thailand

[ดู Profile ทั้งหมด]
 ผู้ติดตามบล็อก : 4 คน [?]

บทความทั้งหมด