छिपे हुए पाठ को ब्राउज़र से खींचा जा सकता है?

Question

आप एक HTML तत्व कैसे बना सकते हैं, जब ब्राउज़र से टेक्स्ट एडिटर में खींचा जाता है, ड्रैग किए गए तत्व पर या छिपे हुए टेक्स्ट को छुपा पाठ संपादक में चिपकाया जाएगा?

मेरी पहली सोचा एंकर टैग पर href विशेषता का उपयोग करने के लिए था:

<a href="hidden message text here">Drag me into a text editor!</a> 

यह क्रोम में अच्छा काम करता है, लेकिन फ़ायरफ़ॉक्स और सफारी href मूल्य जो की नकल की संदेश अनुपयोगी रेंडर से रिक्त स्थान को हटा दें।

कोई विचार?

Answer 1

टेक्स्ट/लिंक/छवियों को खींचने के लिए ब्राउज़र के डिफ़ॉल्ट व्यवहार में हेरफेर करने के बजाय, आप dragstart ईवेंट में डेटा को मनमाने ढंग से सेट करना चाहते हैं।

उदाहरण के लिए, एक छिपे हुए #content से पाठ का उपयोग करें: एक काम कर रहा है JSFiddle

Answer 2

10 नीचे IE के संस्करणों जो DataTransfer विधि का समर्थन नहीं करते के लिए

$('[draggable]').on('dragstart', function(e) { 
    var content = $(this).find('#content').text(); // Can be anything you want! 
    e.originalEvent.dataTransfer.setData('text/plain', content); 
    $(this).addClass('dragging'); 
}); 

यहाँ, मुझे पता चला है इस काम को करने के लिए एक और कुछ हद तक हैकी तरीका।

असल में आप सीएसएस के साथ अदृश्य पाठ बनाते हैं तो होवर पर पृष्ठभूमि में इसे चुनने के लिए जेएस का उपयोग करें।

एचटीएमएल

<div id="drag_area" draggable="true"> 
    <div id="text"> 
     hidden text 
    </div> 
</div>​ 

सीएसएस

#text { filter:alpha(opacity=0); opacity:0; 
     overflow:hidden; z-index:100000; width:180px; height:50px } 

जे एस

function selectText(elementID) { 
     var text = document.getElementById(elementID); 
     if ($.browser.msie) { 
      var range = document.body.createTextRange(); 
      range.moveToElementText(text); 
      range.select();   
     } else if ($.browser.mozilla || $.browser.opera) { 
      var selection = window.getSelection(); 
      var range = document.createRange(); 
      range.selectNodeContents(text); 
      selection.removeAllRanges(); 
      selection.addRange(range); 
     } else { 
      var selection = window.getSelection(); 
      selection.setBaseAndExtent(text, 0, text, 1); 
     } 
    } 
    $('#drag_area').hover(function(){ 
     selectText('text'); 
    }); 

यहाँ यह एंसन के समाधान और एक छोटे से सुविधा का पता लगाने के साथ संयुक्त है: http: // jsfiddle .NET/zaqx/PB6XL/ (आईई 8, आईई 9 और सभी आधुनिक ब्राउज़रों में काम करता है)

संपादित करें: नीचे दी गई टिप्पणियों में अपडेट किया गया पहेली।