Drag/Drop เป็นคุณสมบัติที่พบบ่อยมาก คุณสามารถคว้าวัตถุและลากไปยังพื้นที่ที่คุณต้องการวาง JavaScripts จำนวนมากใช้ฟังก์ชั่นที่เกี่ยวข้องในทำนองเดียวกันเช่นส่วนประกอบ Draganddrop ของ JQueryui ใน HTML5 Drag Drop กลายเป็นการดำเนินการมาตรฐานและองค์ประกอบใด ๆ รองรับ เนื่องจากฟังก์ชั่นนี้เป็นเรื่องธรรมดาเบราว์เซอร์กระแสหลักทั้งหมดจึงรองรับการดำเนินการนี้
เปิดใช้งานคุณสมบัติการลากแบบลากได้มันง่ายมาก เพียงปรับเปลี่ยนแอตทริบิวต์การลากขององค์ประกอบเป็น draggable และองค์ประกอบนี้รองรับการลากดังที่แสดงด้านล่าง:
<imgDraggable = "true"/>
ผ่านข้อมูลขณะลากในระหว่างกระบวนการลากเรามักจะต้องผ่านข้อมูลเชิงตรรกะที่สอดคล้องกันเพื่อให้กระบวนการแปลงเสร็จสมบูรณ์ ที่นี่เราใช้วัตถุ DataTransfer เป็นหลักสำหรับการถ่ายโอนข้อมูล มาดูสมาชิกก่อน:
สมาชิกวิธีการ:
setData (รูปแบบ, ข้อมูล): กำหนดข้อมูลที่ลากไปยังวัตถุ DataTransfer
รูปแบบ: พารามิเตอร์สตริงที่ระบุประเภทของข้อมูลที่ถูกลาก ค่าของพารามิเตอร์นี้สามารถเป็นข้อความ (ประเภทข้อความ) และ URL (ประเภท URL) พารามิเตอร์นี้เป็นตัวพิมพ์ใหญ่ดังนั้นข้อความจึงเหมือนกับข้อความ
ข้อมูล: พารามิเตอร์ประเภทตัวแปรที่ระบุข้อมูลที่ถูกลาก ข้อมูลสามารถเป็นข้อความเส้นทางรูปภาพ url ฯลฯ
ฟังก์ชั่นนี้มีค่าส่งคืนของประเภทบูลีน จริงหมายความว่าข้อมูลจะถูกเพิ่มลงใน DataTransfer ได้สำเร็จและเท็จหมายความว่าไม่ประสบความสำเร็จ หากจำเป็นพารามิเตอร์นี้สามารถใช้ในการตัดสินใจว่าควรมีตรรกะบางอย่างต่อเนื่องหรือไม่
getData (รูปแบบ): รับข้อมูลการลากที่เก็บไว้ใน DataTransfer
รูปแบบหมายถึงเช่นเดียวกับใน setData และค่าสามารถเป็นข้อความ (ประเภทข้อความ) และ URL (ประเภท URL)
ClearData (รูปแบบ): ลบข้อมูลประเภทที่ระบุ
นอกเหนือจากข้อความ (ประเภทข้อความ) และ URL (ประเภท URL) ที่สามารถระบุได้ด้านบนรูปแบบที่นี่ยังสามารถใช้ค่าต่อไปนี้: ไฟล์ไฟล์, องค์ประกอบ HTML-HTML, ภาพ-ภาพ
วิธีนี้สามารถใช้ในการเลือกประมวลผลชนิดข้อมูลที่ลาก
สมาชิกแอตทริบิวต์ :Effectlowed: ตั้งค่าหรือรับการดำเนินการที่ข้อมูลในองค์ประกอบแหล่งข้อมูลสามารถทำงานได้
ประเภทแอตทริบิวต์คือสตริงและช่วงค่ามีดังนี้:
ข้อมูลสำเนา
ข้อมูลลิงค์ลิงค์
ข้อมูลการย้ายโมบิล
Copylink - ข้อมูลคัดลอกหรือลิงก์กำหนดโดยวัตถุเป้าหมาย
CopyMove - คัดลอกหรือย้ายข้อมูลกำหนดโดยวัตถุเป้าหมาย
LinkMove - ลิงก์หรือย้ายข้อมูลกำหนดโดยวัตถุเป้าหมาย
สนับสนุนการดำเนินการทั้งหมดทั้งหมด
ห้ามมิให้มีการลาก
uninitialized - ค่าเริ่มต้นใช้พฤติกรรมเริ่มต้น
โปรดทราบว่าหลังจากตั้งค่าเอฟเฟกต์ให้ไม่มีการลากแล้วการลากจะถูกห้าม แต่รูปร่างของเมาส์ยังคงแสดงรูปร่างของวัตถุที่ไม่สามารถลากได้ หากคุณต้องการที่จะไม่แสดงรูปร่างของเมาส์นี้คุณจะต้องตั้งค่าการส่งคืนคุณสมบัติของเหตุการณ์เหตุการณ์ของหน้าต่างเป็นเท็จ
Dropeffect: ชุดหรือได้รับอนุญาตให้ดำเนินการบนเป้าหมายที่ถูกลากและรูปร่างของเมาส์ที่เกี่ยวข้อง
ประเภทแอตทริบิวต์คือสตริงและช่วงค่ามีดังนี้ :การคัดลอก-รูปร่างของเมาส์เมื่อปรากฏเป็นสำเนา;
ลิงก์-เมาส์จะแสดงเป็นรูปร่างของการเชื่อมต่อ
การเคลื่อนย้าย-เมาส์ปรากฏเป็นรูปร่างที่เคลื่อนไหว
ไม่มี (ค่าเริ่มต้น) - เมาส์จะปรากฏเป็นรูปร่างโดยไม่ต้องลาก
Effectallowed ระบุการดำเนินการที่สนับสนุนโดยแหล่งข้อมูลดังนั้นจึงมักจะระบุไว้ในเหตุการณ์ onDragStart Dropeffect ระบุการกระทำที่สนับสนุนโดยการลากเป้าหมายดังนั้นจึงมักจะใช้ในเหตุการณ์เช่น ondragenter, ondragover และ ondrop บนเป้าหมายที่ลาก
ไฟล์: ส่งคืนรายการไฟล์ filelist ที่ลาก
ประเภท: รายการประเภทของข้อมูลที่ส่งใน onDragStart (ข้อมูลลาก)
การมีอยู่ของวัตถุ DataTransfer ทำให้สามารถส่งผ่านข้อมูลเชิงตรรกะระหว่างแหล่งข้อมูลที่ถูกลากและองค์ประกอบเป้าหมาย โดยปกติแล้วเราจะใช้เมธอด setData เพื่อให้ข้อมูลในเหตุการณ์ onDragStart ขององค์ประกอบแหล่งข้อมูลและจากนั้นในองค์ประกอบเป้าหมายเราใช้วิธี getData เพื่อรับข้อมูล
เหตุการณ์ที่เกิดขึ้นระหว่างการลากต่อไปนี้เป็นเหตุการณ์ที่จะเกิดขึ้นเมื่อลากและลดลง โดยพื้นฐานแล้วลำดับการเรียกของเหตุการณ์คือลำดับต่อไปนี้:
DragStart: ทริกเกอร์เมื่อองค์ประกอบที่จะลากเริ่มลาก วัตถุเหตุการณ์นี้เป็นองค์ประกอบที่ลาก
Drag: ทริกเกอร์เมื่อลากองค์ประกอบวัตถุเหตุการณ์นี้เป็นองค์ประกอบที่ลาก
Dragenter: ทริกเกอร์เมื่อลากองค์ประกอบลงในองค์ประกอบเป้าหมาย วัตถุเหตุการณ์นี้เป็นองค์ประกอบเป้าหมาย
Dragover: ทริกเกอร์เมื่อลากองค์ประกอบเพื่อย้ายไปที่องค์ประกอบเป้าหมาย วัตถุเหตุการณ์นี้เป็นองค์ประกอบเป้าหมาย
Dragleave: ทริกเกอร์เมื่อลากองค์ประกอบออกไปจากองค์ประกอบเป้าหมาย วัตถุเหตุการณ์นี้เป็นองค์ประกอบเป้าหมาย
Drop: ทริกเกอร์เมื่อองค์ประกอบที่ลากถูกวางไว้ในองค์ประกอบเป้าหมาย วัตถุเหตุการณ์นี้เป็นองค์ประกอบเป้าหมาย
Dragend: ทริกเกอร์หลังจากดร็อปซึ่งจะถูกกระตุ้นเมื่อการลากเสร็จสิ้น วัตถุเหตุการณ์นี้เป็นองค์ประกอบที่ลาก
โดยทั่วไปเหตุการณ์พารามิเตอร์เหตุการณ์จะผ่านองค์ประกอบที่เกี่ยวข้องซึ่งสามารถแก้ไขได้ง่าย ที่นี่เราไม่จำเป็นต้องจัดการกับแต่ละเหตุการณ์เรามักจะต้องเชื่อมต่อเหตุการณ์หลักสองสามเหตุการณ์เท่านั้น
เหตุการณ์ Dragstartพารามิเตอร์ที่ส่งผ่านจากเหตุการณ์นี้มีข้อมูลจำนวนมากและคุณสามารถรับองค์ประกอบที่ถูกลากได้อย่างง่ายดาย (Event.target); คุณสามารถตั้งค่าข้อมูลที่ถูกลาก (Event.datRansfer.setData); ดังนั้นคุณสามารถใช้ตรรกะที่อยู่เบื้องหลังการลากได้อย่างง่ายดาย (แน่นอนคุณสามารถผ่านพารามิเตอร์อื่น ๆ เมื่อคุณผูก)
ในระหว่างการลาก - ondrag, ondragover, ondragenter และ ondragleave events วัตถุประสงค์ของเหตุการณ์ onDrag เป็นองค์ประกอบการลากและเหตุการณ์นี้มักจะจัดการน้อยลง เหตุการณ์ onDragenter เกิดขึ้นเมื่อลากเข้าไปในองค์ประกอบปัจจุบันเหตุการณ์ onDragleave เกิดขึ้นเมื่อลากออกจากองค์ประกอบปัจจุบันและเหตุการณ์ onDragover เกิดขึ้นเมื่อลากการเคลื่อนที่ในองค์ประกอบปัจจุบันสิ่งเดียวที่ควรทราบที่นี่คือโดยค่าเริ่มต้นเบราว์เซอร์ห้ามการลดลงขององค์ประกอบดังนั้นเพื่อให้องค์ประกอบที่จะลดลงคุณจะต้องส่งคืนเท็จในฟังก์ชันนี้หรือโทรหาเหตุการณ์ preventDefault () ดังที่แสดงในตัวอย่างต่อไปนี้
Drag End - OnDrop, onDragend Eventเมื่อข้อมูล draggable ลดลงเหตุการณ์การตกจะถูกทริกเกอร์ หลังจากสิ้นสุดลงเหตุการณ์ Dragend จะถูกทริกเกอร์และเหตุการณ์นี้ใช้ค่อนข้างน้อย
ลองมาดูตัวอย่างง่ายๆ:
<! doctypehtml>
<html>
<head>
<scriptType = "text/javascript">
functionallydrop (ev) {
ev.preventdefault ();
-
functionDrag (ev) {
ev.datransfer.setData ("ข้อความ", ev.target.id);
-
FunctionDrop (ev) {
vardata = ev.datransfer.getData ("ข้อความ");
ev.target.appendchild (document.getElementById (data));
ev.preventdefault ();
-
</script>
</head>
<body>
<divid = "div1" ondrop = "drop (event)" onDragover = "lewaldrop (event)"> </div>
<imgid = "drag1" src = "img_logo.gif" draggable = "true" onDragStart = "drag (เหตุการณ์)" width = "336" ความสูง = "69"/>>
</body>
</html>
ลากและลากไฟล์ตัวอย่างข้างต้นใช้วิธีการและคุณสมบัติต่าง ๆ ของ DataTransfer ลองดูแอปพลิเคชันที่น่าสนใจอื่นบนอินเทอร์เน็ต: ลากและวางรูปภาพบนหน้าเว็บแล้วแสดงบนหน้าเว็บ แอปพลิเคชันนี้ใช้คุณสมบัติไฟล์ของ DataTransfer
<! doctypehtml>
<html>
<head>
<metacharset = "utf-8">
<title> html5 drag and drop file </title>
<style>
#Section {Font-Family: "Georgia", "Microsoft Yahei", "Chinese Song";}
.Container {แสดง: inline-block; min-height: 200px; min-width: 360px; สี:#f30; padding: 30px; ชายแดน: 3pxsolid#ddd; -moz-border-radius: 10px; -webkit-border-Radius: 10px;
.Preview {Max-Width: 360px;}
#ไฟล์-รายการ {ตำแหน่ง: Absolute; Top: 0; ซ้าย: 500px;}
#list {width: 460px;}
#list.preview {max-width: 250px;}
#listp {color:#888; Font-Size: 12px;}
#list.green {color:#09c;}
</style>
</head>
<body>
<divid = "ส่วน">
<p> ลากรูปภาพของคุณไปยังคอนเทนเนอร์ด้านล่าง: </p>
<divid = "container" class = "container">
</div>
<divid = "files-list">
<p> ไฟล์ที่ถูกลากใน: </p>
<ulid = "list"> </ul>
</div>
</div>
<script>
if (window.filereader) {
varlist = document.getElementById ('รายการ')
cnt = document.getElementById ('คอนเทนเนอร์');
// ตัดสินว่าภาพนั้นเป็นอย่างไร
functionisimage (ประเภท) {
สวิตช์ (พิมพ์) {
case'image/jpeg ':
case'image/png ':
case'image/gif ':
case'image/bmp ':
case'image/jpg ':
returntrue;
ค่าเริ่มต้น:
returnfalse;
-
-
// จัดการรายการไฟล์ลากและวาง
functionhandlefileselect (evt) {
evt.stoppropagation ();
evt.preventdefault ();
varfiles = evt.DatAtransfer.files;
สำหรับ (vari = 0, f; f = ไฟล์ [i]; i ++) {
vart = f.type? f.type: 'n/a',
reader = newFileReader ()
looks = function (f, img) {
list.innerhtml+= '<li> <strong>'+f.name+'</strong> ('+t+
')-'+f.size+'ไบต์ <p>'+img+'</p> </li>';
cnt.innerhtml = img;
-
isimg = isimage (t)
IMG;
// การประมวลผลรูปภาพที่ได้รับ
ถ้า (isimg) {
reader.onload = (ฟังก์ชั่น (ไฟล์) {
returnfunction (e) {
img = '<imgclass = "preview" src = "'+e.target.result+'" title = "'+thefile.name+'"/>';
ดู (Thefile, IMG);
-
}) (f)
reader.readasdataurl (f);
}อื่น{
img = '"o ((> Ω <)) o" สิ่งที่คุณส่งมาไม่ใช่ภาพ! - -
ดู (f, img);
-
-
-
// จัดการการแทรกและลากเอฟเฟกต์ออก
functionhandledragenter (evt) {this.setAttribute ('style', 'สไตล์ชายแดน: dashed;');}
functionhandledragleave (evt) {this.setAttribute ('style', '');}
// จัดการเหตุการณ์การลากไฟล์เพื่อป้องกันการเปลี่ยนเส้นทางที่เกิดจากเหตุการณ์เริ่มต้นของเบราว์เซอร์
functionhandledRagover (evt) {
evt.stoppropagation ();
evt.preventdefault ();
-
cnt.addeventListener ('dragenter', handledragenter, false);
cnt.addeventListener ('dragover', handledragover, false);
cnt.addeventListener ('drop', handlefileselect, false);
cnt.addeventListener ('dragleave', handledragleave, false);
}อื่น{
document.getElementById ('ส่วน'). innerhtml = 'เบราว์เซอร์ของคุณไม่รองรับเพื่อนร่วมชั้น';
-
</script>
</body>
</html>
ในตัวอย่างนี้ใช้ API การอ่านไฟล์ใน HTML5: วัตถุ filereader; วัตถุนี้มีวิธีการแบบอะซิงโครนัสต่อไปนี้สำหรับการอ่านไฟล์:
1.FileReader.ReadAsBinaryString (FileBlob)
อ่านไฟล์ในโหมดไบนารีแอตทริบิวต์ผลลัพธ์จะมีรูปแบบไบนารีของไฟล์
2.FileReader.Readastext (FileBlob, OPT_ENCODING)
อ่านไฟล์ในโหมดข้อความ แอตทริบิวต์ผลลัพธ์จะมีรูปแบบข้อความของไฟล์ พารามิเตอร์การถอดรหัสเริ่มต้นคือ UTF-8
3.FileReader.readasDataUrl (ไฟล์)
การอ่านผลลัพธ์ไฟล์ในรูปแบบ URL จะมีรูปแบบ dataurl ของไฟล์ (ภาพมักจะเป็นวิธีนี้)
เมื่อไฟล์ถูกอ่านโดยใช้วิธีการข้างต้นเหตุการณ์ต่อไปนี้จะถูกเรียกใช้:
Onloadstart, onprogress, onabort, onerror, onload, onloadend
เหตุการณ์เหล่านี้ง่ายมากเพียงแค่ขอเมื่อจำเป็น ดูตัวอย่างรหัสต่อไปนี้:
functionStArtread () {
// atainInputElementthroughdom
varfile = document.getElementById ('ไฟล์') ไฟล์ [0];
ถ้า (ไฟล์) {
getastext (ไฟล์);
-
-
functiongetastext (readfile) {
varreader = newFileReader ();
// readfileintomoryasutf-16
reader.readastext (readfile, "UTF-16");
// handleprogress, Success, Anderrors
reader.onProgress = UpdateProgress;
reader.onload = โหลด;
reader.onerror = errorhandler;
-
FunctionUpDateProgress (EVT) {
if (evt.lengthcomputable) {
//evt.loadedandandevt.totalareprogressEventProperties
varloaded = (evt.loaded/evt.total);
ถ้า (โหลด <1) {
// เพิ่มความยาว
//style.width=( โหลด*200)+"px ";
-
-
-
functionloaded (evt) {
// atainthereadfiledata
varfilestring = evt.target.result;
// handleutf-16filedump
if (utils.regexp.ischinese (filestring)) {
// chinesecharacters+namevalidation
-
อื่น{
// runotherCharSetTetest
-
//xhr.send(filestring)
-
functionerRorHandler (evt) {
if (evt.target.error.name == "NotreadableerR") {
// thefile ไม่สามารถไม่ได้
-
-
ให้ฉันพูดคุยสั้น ๆ เกี่ยวกับที่นี่: ดาวน์โหลดไฟล์ธรรมดาใช้วิธี window.open ตัวอย่างเช่น:
window.open ('http://aaa.bbbb.com/ccc.rar' ,'_blank')
การอ้างอิงเชิงปฏิบัติ: เอกสารอย่างเป็นทางการ: http://www.w3schools.com/html5/เว็บไซต์การสอนที่ดี: http://html5.phphube.com/html5/features/drapanddrop/
วิธีใช้ msdn: http://msdn.microsoft.com/en-us/library/ms535861(v=vs.85).aspx
รายละเอียดคำอธิบายของการลากและวางไฟล์: http://www.html5rocks.com/zh/tutorials/file/dndfiles/
ลากและอัปโหลดไฟล์: http://www.chinaz.com/design/2010/0909/131984.shtml
ตัวอย่างที่สมบูรณ์ของการลากและวางไฟล์อัปโหลด: http://www.vevb.com/liaofeng/archive/2011/05/18/2049928.html
ตัวอย่างการดาวน์โหลดไฟล์: http://hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05
Window.open คู่มือ: http://www.vevb.com/liulf/archive/2010/03/01/1675511.html
window.open พารามิเตอร์: http://www.koyoz.com/blog/?action=show&id=176