텍스트 상자 내에서 드래그 가능/정렬 가능한 항목

Question

draggable 및 sortable (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는 나는 당신을 writting 드래그 앤 드롭과 함께 물건을 변경해야하기 위하여려고하는 경우에

이

2) 왜 HTML로 된 div의

conteneditable 

속성을 사용하여 마크 업에 어떤 텍스트 상자를 볼 수 없습니다 그런 식으로 elastic textbox에서 일반적으로 수행 할 모든 작업을 수행 할 수 있으며 div로 표시됩니다.

3) 및 NO! DOM 요소의 컨테이너로 간단한 텍스트 상자를 사용할 수 없습니다!

는

그것이

도움이되기를 바랍니다 HTML에 contenteditable에 대한 W3 스쿨 참조