jQuery Drag & Drop в текстовую область

Question

Использование jQuery и поиск, позволяющий пользователю перетащить заполнитель в текстовую область.

Каждый заполнитель представляет собой <span>, который имеет class='placeholder'. Текстовая область id - это просто 'main_text'.

Таким образом, пользователь должен иметь возможность перетаскивать каждый заполнитель span поверх текстовой области, отбрасывать его, а затем вводить текст.

Наиболее желательным эффектом было бы вставить текст, в котором они отбрасывают местозаполнитель, но я почти полностью отказался от этого. На данный момент, чтобы заставить его работать, чтобы он вставлял текст в любом месте, это было бы хорошим началом.

Неужели кто-нибудь успешно это сделал? Спасибо -

Answer 1

Я не думаю, что вы можете использовать текстовое поле прямо как droppable, таким образом, я сделал небольшой взлом, который при перетаскивании позиционирует div непосредственно над текстовым полем. ДИВ является фактическим Droppable, который затем вставляет текст перетаскиваемых в текстовое поле

Проверьте здесь для демо

http://jsbin.com/egefi (http://jsbin.com/egefi/edit для кода)

Она вставляет в текущей позиции textcaret Я не» t думаю, что вставка в текущее положение курсора мыши даже возможна.

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(); 
     } 
    }); 
});