DIV

2011-09-24 15 views
6

पर ड्रैग-ड्रॉप टेक्स्ट मेरे पास मेरी वेबसाइट में एक div है, और जब इसे क्लिक किया जाता है, तो यह खोज बॉक्स (jQuery के साथ किया जाता है) दिखाता है।DIV

हालांकि, मैं चाहता हूं कि यह div drag'n'dropped टेक्स्ट को स्वीकार करे। मेरे उपयोग के मामले में, उपयोगकर्ता साइट पर कहीं से भी नियमित पाठ का चयन करता है, और उसे खोज बॉक्स में कॉपी-पेस्ट करने के लिए खींचता है।

यदि खोज बॉक्स हमेशा दिखाई देता था, तो वह इसे आसानी से टेक्स्ट बॉक्स में छोड़ सकता था, जो ब्राउज़र/ओएस द्वारा मूल रूप से संभाला जाता था। हालांकि, क्या एक तरीका है कि मैं इस div के साथ एक ही चीज़ अनुकरण कर सकता हूं? उपयोगकर्ता अपना टेक्स्ट div पर छोड़ देगा, और यह टेक्स्ट बॉक्स को दिखाने के लिए क्लिक ईवेंट को फायर करेगा और ड्रॉप किए गए टेक्स्ट को बॉक्स में पेस्ट करेगा।

मेरी वेबसाइट आधुनिकizr + jQuery + jQuery UI और HTML5/CSS3 का उपयोग करती है। आईई 6 संगतता एक गैर-मुद्दा है।

अग्रिम धन्यवाद!

$('#dropTextHere').bind('drop', function (e) { 
    var theDroppedText = e.originalEvent.dataTransfer.getData('Text'); 
}); 

आप इसे here के बारे में अधिक पढ़ सकते हैं:

+0

[यह प्रश्न] (http://stackoverflow.com/questions/1922559/jquery-drag-drop-into-a-text-area) एक समान विषय को शामिल करता है। –

+0

मैंने उस विषय को देखा, लेकिन इसके लिए ड्रैग किए गए टेक्स्ट को एक विशिष्ट कंटेनर में होना आवश्यक है जिसे तब ड्रैगगेबल() बनाया जाता है, जबकि मैं आपके द्वारा हाइलाइट और ड्रैग किए गए किसी भी पुराने नियमित टेक्स्ट के बारे में बात कर रहा हूं। मैंने पहले से ही divpable() को div को लागू करने का प्रयास किया है, और ड्रॉप इवेंट आग लगती नहीं है। –

+0

शायद 'माउसओवर', 'माउसअप' और 'document.getSelection' के संयोजन का उपयोग करके काम करेगा। Http://stackoverflow.com/questions/1317727/get-selected-text-on-the-page-not-in-a-textarea-with-jquery –

उत्तर

7

आप एचटीएमएल 5 खींचें और छोड़ें घटनाओं का उपयोग कर सकते हैं।

+0

धन्यवाद एक गुच्छा देखें! उस कोड और लेख ने यह किया! –