jQuery एक टेक्स्ट एरिया

Question

jQuery में खींचें और ड्रॉप करें, और उपयोगकर्ता को प्लेसहोल्डर को टेक्स्ट क्षेत्र में खींचने दें।

प्रत्येक प्लेसहोल्डर <span> है जिसमें class='placeholder' है। टेक्स्ट क्षेत्र id बस 'main_text' है।

तो, उपयोगकर्ता टेक्स्ट प्लेस के शीर्ष पर प्रत्येक प्लेसहोल्डर span खींचने में सक्षम होना चाहिए, इसे छोड़ दें, और फिर टेक्स्ट डाला जाए।

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

क्या किसी ने सफलतापूर्वक यह किया है? धन्यवाद -

Answer 1

मुझे नहीं लगता कि आप टेक्स्टरेरा को सीधे ड्रॉपपेल के रूप में उपयोग कर सकते हैं इस प्रकार मैंने थोड़ा हैक बनाया है जो ड्रैग-स्टार्ट पर सीधे टेक्स्टरेरा पर एक div को स्थान देता है। div वास्तविक droppable जो फिर एक डेमो

http://jsbin.com/egefi के लिए यहाँ पाठ क्षेत्र में खींचने योग्य का पाठ सम्मिलित करता है

चेक (http://jsbin.com/egefi/edit कोड के लिए)

यह वर्तमान textcaret स्थिति मैं डॉन 'में सम्मिलित करता है टी वर्तमान माउस कर्सर स्थिति में डालने लगता है भी संभव है।

function insertAtCaret(area, text) { 
    //... adapted from http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/ 
} 

$(document).ready(function() { 
    var options = { 
     accept: "span.placeholder",  
     drop: function(ev, ui) { 
      insertAtCaret($("textarea#main_text").get(0), ui.draggable.eq(0).text()); 
     } 
    }; 

    $("span.placeholder").draggable({ 
     helper:'clone', 
     start: function(event, ui) { 
      var txta = $("textarea#main_text"); 
      $("div#pseudodroppable").css({ 
       position:"absolute", 
       top:txta.position().top, 
       left:txta.position().left, 
       width:txta.width(), 
       height:txta.height() 
      }).droppable(options).show(); 
     }, 
     stop: function(event, ui) { 
      $("div#pseudodroppable").droppable('destroy').hide(); 
     } 
    }); 
});