Bloggang.com : กึ่งยิงกึ่งผ่าน : การทำให้รูปภาพสามารถย้ายตำแหน่งได้

การทำให้รูปภาพสามารถย้ายตำแหน่งได้

ปกติรูปที่อยู่ในเว็บ จะไม่สามารถเลื่อนตำแหน่งได้โดยการคลิกเมาส์แล้วลากไปไหนมาไหน ( 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">


ซึ่งชื่อในวงเล็บ คือชื่อของรูปที่เราต้องการให้มีการ 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 น.

37 comments

Counter : 3243 Pageviews.

โดย: 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 น.