Draggable/sortable items in textbox

Question

Я пытаюсь создать функциональное текстовое поле с перетаскиваемыми и сортируемыми (jQuery UI) div внутри. Я хочу, чтобы пользователь мог писать текст и перетаскивать элементы вправо, точно так же, как текст. Вот макет того, что я должен сделать:

Здесь вы видите три раскрывающихся меню, которые можно перетаскивать в любом месте в текстовом поле, и текст, разделяя их.

Я добился значительных успехов на базовом перетаскивании/сортировке, но получение их внутри текстового поля и обработка текста, как текст, оказывается намного сложнее.

Возможно ли это?

Here is a jsFiddle of my code so far.

И код:

<div class="demo"> 
     <div id="sortable" class="ui-state-default"> 
      <div id="draggable1" class="ui-state-default draggable"> 
       <select> 
        <option>1</option> 
        <option>10</option> 
        <option>100</option> 
       </select> 
      </div> 
      <div id="draggable2" class="ui-state-default draggable"> 
       <select> 
        <option>1</option> 
        <option>10</option> 
        <option>100</option> 
       </select> 
      </div> 
      <div id="draggable3" class="ui-state-default draggable"> 
       <select> 
        <option>1</option> 
        <option>10</option> 
        <option>100</option> 
       </select> 
      </div> 
     </div> 
    </div> 

dvdv

<style> 
    .draggable { 
     height: 35px; 
    } 

    #draggable1 { 
     width: 45px; 
    } 

    #draggable2 { 
     width: 150px; 
    } 

    #draggable3 { 
     width: 150px; 
    } 

    #sortable { 
     width: 356px; 
     height: 35px; 
     text-align: center; 
     display: table; 
     overflow: hidden; 
     padding:0; 
     margin:0; 
    } 

    #sortable > div { 
     float: left; 
    } 
</style> 


<script> 
     $(function() { 
      $("#sortable").sortable({ 
       revert: true 
      }); 
     }); 
    </script> 

Answer 1

Немного Очки:

1) Как говорят, ваше название s «с в текстовом поле» Я не вижу никакого текстового поля в разметке

2) Если вы собираетесь быть сочинительства и изменяя материал вместе с перетаскиванием почему бы не использовать

conteneditable 

атрибут дивы в HTML таким образом вы можете делать все действия, которые вы обычно делаете в elastic textbox, и все же это будет div

3) и НЕТ! вы не можете использовать простой текстовый ящик как контейнер элементов DOM!

см w3schools для contenteditable в HTML

надеюсь, что это помогает