คำถามติดแท็ก drag-and-drop

ปัญหาที่ฉันมีคือdragleaveเหตุการณ์ขององค์ประกอบนั้นถูกไล่ออกเมื่อทำการวางตัวองค์ประกอบย่อยขององค์ประกอบนั้น นอกจากนี้dragenterจะไม่ถูกไล่ออกเมื่อโฮเวอร์กลับองค์ประกอบหลักอีกครั้ง ฉันทำไวโอลินง่าย: http://jsfiddle.net/pimvdb/HU6Mk/1/ HTML: <div id="drag" draggable="true">drag me</div> <hr> <div id="drop"> drop here <p>child</p> parent </div> ด้วย JavaScript ต่อไปนี้: $('#drop').bind({ dragenter: function() { $(this).addClass('red'); }, dragleave: function() { $(this).removeClass('red'); } }); $('#drag').bind({ dragstart: function(e) { e.allowedEffect = "copy"; e.setData("text/plain", "test"); } }); สิ่งที่ควรทำคือการแจ้งผู้ใช้ด้วยการทำให้divสีแดงหล่นเมื่อลากสิ่งที่มี วิธีนี้ใช้ได้ผล แต่ถ้าคุณลากเข้าสู่pเด็กการdragleaveถูกไล่ออกและdivจะไม่เป็นสีแดงอีกต่อไป การย้ายกลับไปยังการดร็อปdivไม่ทำให้แดงอีกเลย มีความจำเป็นที่จะต้องย้ายออกจากการตกdivและลากกลับเข้าไปอีกครั้งเพื่อทำให้เป็นสีแดง เป็นไปได้หรือไม่ที่จะป้องกันไม่ให้dragleaveยิงเมื่อลากเข้าสู่องค์ประกอบย่อย 2017 …

300 javascript  jquery  html  drag-and-drop  jquery-events 

ฉันเคยเห็นสิ่งนี้ทำในสภาพแวดล้อมTurbo C ++ของ Borland แต่ฉันไม่แน่ใจว่าจะทำอย่างไรกับแอปพลิเคชัน C # ที่ฉันกำลังทำงาน มีวิธีปฏิบัติที่ดีที่สุดหรือ gotchas ระวังหรือไม่

251 c#  winforms  drag-and-drop 

ฉันกำลังเพิ่มตัวอัปโหลดลากและวาง html5 ในหน้าของฉัน เมื่อไฟล์ถูกทิ้งลงในพื้นที่อัพโหลดทุกอย่างใช้งานได้ดี อย่างไรก็ตามหากฉันบังเอิญวางไฟล์นอกพื้นที่อัพโหลดเบราว์เซอร์จะโหลดไฟล์ในเครื่องเสมือนว่าเป็นหน้าใหม่ ฉันจะป้องกันพฤติกรรมนี้ได้อย่างไร ขอบคุณ!

194 javascript  jquery  html  drag-and-drop 

ตามที่เป็นอยู่ในปัจจุบันคำถามนี้ไม่เหมาะสำหรับรูปแบบคำถาม & คำตอบของเรา เราคาดหวังคำตอบที่จะได้รับการสนับสนุนจากข้อเท็จจริงการอ้างอิงหรือความเชี่ยวชาญ แต่คำถามนี้มีแนวโน้มที่จะเรียกร้องให้มีการอภิปรายโต้แย้งโต้แย้งหรือการอภิปรายเพิ่มเติม หากคุณรู้สึกว่าคำถามนี้สามารถปรับปรุงและเปิดใหม่ได้โปรดไปที่ศูนย์ช่วยเหลือเพื่อขอคำแนะนำ ปิดให้บริการใน7 ปีที่ผ่านมา มีปลั๊กอิน jQuery ที่เรียบร้อยซึ่งอนุญาตให้รวมสคริปต์ JS เดียวจากนั้นใช้ข้อมูลโค้ดอย่างง่ายเพื่อเปิดใช้งานฟอร์มหรือไม่ บางสิ่งเช่นนี้ $j('#MyForm').enableDragDropUploads('.upload-area') ด้วยเป้าหมายการอัปโหลดเป็นการกระทำของแบบฟอร์ม วิธีการแก้ปัญหาใด ๆ จะต้องไม่ป้องกันฟิลด์ไฟล์ปกติจากการใช้งาน (โดยใช้วิธีการสืบค้นแบบดั้งเดิม) ฉันต้องการเพียงหนึ่งไฟล์ในแต่ละครั้ง แต่แน่นอนว่าการมีตัวเลือกสำหรับหลายไฟล์นั้นไม่ใช่เรื่องเลวร้าย ฉันพบตัวอย่างการอัปโหลดแบบลากสองสามรายการ: http://www.appelsiini.net/2009/10/drag-and-drop-file-upload-with-google-gears http: //www.appelsiini สุทธิ / 2009/10 / HTML5 ลากและวาง-หลายไฟล์ที่อัปโหลด แต่รหัสนั้นไม่มีการตั้งค่าเป็นปลั๊กอิน อาจไม่ใช่เรื่องยากที่จะเปลี่ยนแปลง แต่ก็ไม่มีประโยชน์ถ้าคนอื่นทำงานแล้วและหลีกเลี่ยงการค้นหาโดย Google ของฉัน ฉันกำลังมองหาโซลูชัน HTML5 / jQuery อย่างแท้จริง Google Gears สามารถใช้ได้ แต่โซลูชัน Flash ไม่ได้

174 jquery  file-upload  drag-and-drop  html  google-gears 

ภาพรวม ฉันมีโครงสร้าง HTML ต่อไปนี้และฉันได้แนบdragenterและdragleaveกิจกรรมกับ<div id="dropzone">องค์ประกอบ <div id="dropzone"> <div id="dropzone-content"> <div id="drag-n-drop"> <div class="text">this is some text</div> <div class="text">this is a container with text and images</div> </div> </div> </div> ปัญหา เมื่อฉันลากไฟล์ไป<div id="dropzone">บนdragenterเหตุการณ์จะเริ่มทำงานตามที่คาดไว้ แต่เมื่อฉันเลื่อนเมาส์ของฉันมากกว่าองค์ประกอบลูกเช่น<div id="drag-n-drop">การdragenterจัดกิจกรรมที่เป็นเชื้อเพลิงสำหรับ<div id="drag-n-drop">องค์ประกอบแล้วdragleaveเหตุการณ์ถูกยิงสำหรับ<div id="dropzone">องค์ประกอบ หากฉันเลื่อนเมาส์ไปที่<div id="dropzone">องค์ประกอบอีกครั้งdragenterเหตุการณ์จะถูกยิงอีกครั้งซึ่งเยี่ยมยอด แต่จากนั้นdragleaveเหตุการณ์จะถูกไล่ออกสำหรับองค์ประกอบลูกเพิ่งออกไปดังนั้นremoveClassคำสั่งจะถูกดำเนินการซึ่งไม่เย็น พฤติกรรมนี้เป็นปัญหาด้วยเหตุผล 2 ประการ: ฉันก็แค่ติดdragenterและdragleaveไป<div id="dropzone">ดังนั้นผมจึงไม่เข้าใจว่าทำไมองค์ประกอบเด็กมีเหตุการณ์เหล่านี้ที่แนบมาด้วยเช่นกัน ฉันยังคงลาก<div id="dropzone">องค์ประกอบขณะโฉบเหนือลูกของมันดังนั้นฉันไม่ต้องการdragleaveยิง! jsFiddle นี่คือ jsFiddle เพื่อคนจรจัดด้วย: http://jsfiddle.net/yYF3S/2/ …

163 jquery  html  file-upload  drag-and-drop  dom-events 

วันนี้เราสามารถลากและวางไฟล์ลงในคอนเทนเนอร์พิเศษแล้วอัปโหลดด้วย XHR 2 หลายครั้ง ด้วยแถบความคืบหน้าสด ฯลฯ สิ่งดีๆมาก ตัวอย่างที่นี่ แต่บางครั้งเราไม่ต้องการความเยือกเย็นขนาดนั้น สิ่งที่ผมต้องการคือการลากและวางไฟล์ - หลายครั้ง - เข้าใส่ไฟล์ HTML มาตรฐาน<input type=file multiple> : เป็นไปได้ไหม มีวิธีการ 'เติม' ไฟล์อินพุตด้วยชื่อไฟล์ที่ถูกต้อง (?) จากไฟล์ดรอปหรือไม่? (เส้นทางไฟล์แบบเต็มไม่พร้อมใช้งานสำหรับเหตุผลด้านความปลอดภัยของระบบไฟล์) ทำไม? เพราะฉันต้องการส่งแบบฟอร์มปกติ สำหรับเบราว์เซอร์และอุปกรณ์ทั้งหมด การลากและวางเป็นเพียงการเพิ่มระดับความก้าวหน้าเพื่อปรับปรุงและลดความซับซ้อนของ UX แบบฟอร์มมาตรฐานพร้อมไฟล์อินพุตมาตรฐาน (+ multipleแอตทริบิวต์) จะอยู่ที่นั่น ฉันต้องการเพิ่มการปรับปรุง HTML5 แก้ไข ฉันรู้ว่าในบางเบราว์เซอร์ที่คุณสามารถบางครั้ง (เกือบตลอดเวลา) วางไฟล์ลงในไฟล์ของตัวเอง ฉันรู้ว่า Chrome ทำเช่นนี้ แต่บางครั้งมันก็ล้มเหลวแล้วโหลดไฟล์ในหน้าปัจจุบัน (ล้มเหลวมากถ้าคุณกรอกแบบฟอร์ม) ฉันต้องการที่จะหลอก & เบราว์เซอร์มัน

163 html  file-upload  drag-and-drop 

คำถามของฉันคือ 2 เท่าและฉันหวังว่าจะมีวิธีแก้ปัญหาที่ง่ายกว่าสำหรับทั้งสองอย่างที่จัดทำโดยWPFแทนที่จะเป็นโซลูชันมาตรฐานจาก WinForms (ซึ่ง Christophe Geers ให้ไว้ก่อนที่ฉันจะชี้แจงนี้) ก่อนอื่นมีวิธีทำให้ Window ลากได้โดยไม่ต้องจับและประมวลผลเหตุการณ์คลิกเมาส์ + ลากหรือไม่? ฉันหมายถึงหน้าต่างสามารถลากได้โดยแถบชื่อเรื่อง แต่ถ้าฉันตั้งค่าหน้าต่างไม่ให้มีและยังคงต้องการให้ลากได้มีวิธีที่จะกำหนดทิศทางเหตุการณ์ใหม่ไปยังสิ่งที่จัดการกับการลากแถบหัวเรื่องหรือไม่ เหรอ? ประการที่สองมีวิธีใช้ตัวจัดการเหตุการณ์กับองค์ประกอบทั้งหมดในหน้าต่างหรือไม่? เช่นเดียวกับทำให้หน้าต่างลากได้ไม่ว่าผู้ใช้จะคลิก + ลากองค์ประกอบใด เห็นได้ชัดว่าไม่ต้องเพิ่มตัวจัดการด้วยตนเองในทุกองค์ประกอบ แค่ทำครั้งเดียว?

111 c#  wpf  user-interface  drag-and-drop 

ฉันกำลังสร้างโปรแกรมประยุกต์บนเว็บการลากและวางเพื่ออัปโหลดโดยใช้ HTML5 และฉันวางไฟล์ลงบน div และแน่นอนเรียกวัตถุ DataTransfer ซึ่งจะช่วยให้ฉันFileList ตอนนี้ฉันต้องการลบไฟล์บางไฟล์ออก แต่ฉันไม่รู้ว่าจะทำได้หรือไม่ ฉันต้องการเพียงแค่ลบออกจาก FileList ฉันไม่มีประโยชน์สำหรับพวกเขา แต่ถ้าเป็นไปไม่ได้ฉันควรเขียนเช็คในโค้ดที่โต้ตอบกับ FileList แทนหรือไม่ ดูเหมือนจะยุ่งยาก

111 javascript  html  drag-and-drop  filelist 

ฉันต้องการวางไฟล์รูปภาพลงในแอปพลิเคชัน WPF ของฉัน ขณะนี้ฉันมีเหตุการณ์ที่เกิดขึ้นเมื่อฉันวางไฟล์ลง แต่ฉันไม่รู้ว่าจะทำอย่างไรต่อไป ฉันจะรับภาพได้อย่างไร เป็นsenderวัตถุภาพหรือควบคุมได้หรือไม่ private void ImagePanel_Drop(object sender, DragEventArgs e) { //what next, dont know how to get the image object, can I get the file path here? }

107 c#  .net  wpf  image  drag-and-drop 

ฉันอยากได้มุมมองที่มียานพาหนะขับไปรอบ ๆ ที่ผู้ใช้สามารถลากและวางได้ คุณคิดว่ากลยุทธ์ขนาดใหญ่ที่ดีที่สุดในการทำสิ่งนี้คืออะไร? จะเป็นการดีที่สุดที่จะรับเหตุการณ์การสัมผัสจากมุมมองที่เป็นตัวแทนของยานพาหนะหรือจากมุมมองที่กว้างขึ้น? มีกระบวนทัศน์ง่ายๆที่คุณใช้ในการลากและวางที่คุณพอใจหรือไม่? อะไรคือข้อเสียของกลยุทธ์ที่แตกต่างกัน?

93 iphone  ipad  ios  drag-and-drop  touch 

ดูเหมือนว่าเหตุการณ์ดร็อปจะไม่เกิดขึ้นเมื่อฉันคาดหวัง ฉันคิดว่าเหตุการณ์ดร็อปเริ่มทำงานเมื่อองค์ประกอบที่ถูกลากถูกปล่อยออกมาเหนือองค์ประกอบเป้าหมาย แต่ดูเหมือนจะไม่เป็นเช่นนั้น ฉันเข้าใจผิดอะไร? http://jsfiddle.net/LntTL/ $('.drop').on('drop dragdrop',function(){ alert('dropped'); }); $('.drop').on('dragenter',function(){ $(this).html('drop now').css('background','blue'); }) $('.drop').on('dragleave',function(){ $(this).html('drop here').css('background','red'); })

93 javascript  jquery  events  drag-and-drop  jquery-events 

ฉันมีองค์ประกอบในเพจที่ลากได้ด้วย jQuery องค์ประกอบเหล่านี้มีเหตุการณ์การคลิกที่นำทางไปยังหน้าอื่นหรือไม่ (เช่นลิงก์ธรรมดา) อะไรคือวิธีที่ดีที่สุดในการป้องกันไม่ให้คลิกเริ่มทำงานเมื่อปล่อยองค์ประกอบดังกล่าวในขณะที่ปล่อยให้การคลิกไม่ได้ถูกลากและวาง ฉันมีปัญหากับองค์ประกอบที่เรียงลำดับได้ แต่คิดว่าเป็นการดีที่จะมีวิธีแก้ปัญหาสำหรับการลากและวางทั่วไป ฉันได้แก้ปัญหาให้ตัวเองแล้ว หลังจากนั้นฉันพบว่ามีวิธีแก้ปัญหาเดียวกันสำหรับ Scriptaculousแต่อาจมีใครบางคนมีวิธีที่ดีกว่าในการบรรลุเป้าหมายนั้น

86 javascript  jquery  events  drag-and-drop  jquery-ui-sortable