固定セクションのドロップ可能なTextArea JQuery

Question

私はいくつかのラベルを修正することができ、関連するラベルの下にコンポーネントをドラッグアンドドロップすることができるテキスト領域が必要です。また、間違ったラベルの下にドロップされた場合、コンポーネントを再配置する機能も必要です。 誰でも私の援助について考えてください。いくつかのサンプルコードを提供すると非常に役に立ちます。 ありがとう！

Answer 1

$(function() { 
 
    $("#elements li b").draggable({ 
 
     appendTo: "body", 
 
     helper: "clone", 
 
     drag: function(event, ui) { 
 
      $(this).remove(); 
 
     } 
 
    }); 
 
    $(".to_drop").droppable({ 
 
     activeClass: "ui-state-default", 
 
     hoverClass: "ui-state-hover", 
 
     // accept: ":not(.ui-sortable-helper)", 
 
     drop: function(event, ui) { 
 
      
 
      var old = $(this).val(); 
 
      if (old == "") { 
 
       $(this).val(ui.draggable.text()); 
 
      } else { 
 
       $(this).val(old + ", " + ui.draggable.text()); 
 
      } 
 
      
 

 
     } 
 
    }) 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
    <li><b>one</b> <b>two</b> <b>three</b></li> 
 
    <li><b>one</b> <b>two</b> <b>three</b></li> 
 
    <li><b>one</b> <b>two</b> <b>three</b></li> 
 
    <li><b>one</b> <b>two</b> <b>three</b></li> 
 
</div> 
 
<textarea type="text" class="to_drop" ></textarea>