文本框中的可拖動/可排序項目

Question

我想創建一個可拖動和可排序（jQuery UI）div的功能文本框。我希望用戶能夠寫文本，並讓可拖動的項目向右移動，就像文本一樣。下面是什麼我做了樣機：

這裏你可以看到它可以在任何地方在文本框中拖動3個下拉菜單，和文字把它們分開。

我在基本的可拖動/可排序方面取得了很好的進展，但讓它們進入文本框並像文本一樣處理就顯得困難得多。

這甚至可能嗎？

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）如果你將要書面方式，並與拖放沿改變的東西，爲什麼不使用的div

conteneditable 

屬性在HTML這樣你就可以做所有的動作，你通常會在elastic textbox裏做，但它仍然是一個格

3）和NO！你不能使用簡單的文本框作爲DOM元素的容器！

看到W3Schools的爲contenteditable在HTML

希望它有助於