jQuery를 사용하여 텍스트 상자를 드래그 할 수있게 만드는 방법은 무엇입니까?

Question

jQuery를 사용하여 html 입력 텍스트 상자를 드래그 할 수있는 경험이있는 사람이 있습니까?

div 안에 텍스트 상자를 감싸려고했는데 크기를 조정할 수는 있지만 드래그 할 수는 없습니다. div 및 텍스트 상자는 표준 jQuery UI 대화 상자에 배치됩니다. 사실, 나는 대화 상자 안에 draggable과 resizable html 입력 텍스트 상자가 둘 다 필요합니다.

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     $("#btnShow").click(function(e) { 
      $('#dialog').dialog("open"); 
     }); 
     $('#dialog').dialog({ 
      title: "Sample dialog", 
      resizable: false, 
      autoOpen: false, 
      width: 400, 
      height: 300, 
      buttons: [{ text: "OK", click: function() { /* do something */ } }, 
       { text: "Cancel", click: function() { $(this).dialog("close") } }] 
     }); 
     $('#divText1').draggable({ 
      containment: "parent", 
      cursor: "move" 
     }).resizable({ 
      containment: "parent", 
      handles: "e, w" 
     }); 
    }); 
</script> 

    <input id="btnShow" type="button" value="Show" /> 

    <div id="dialog" title="Dialog Box" style="border: solid 1px black; margin: 0px 0px 0px 0px; padding: 5px 0px 0px 5x;"> 
     <div id="divText1" style="width: 200px; height: 30px;"> 
      <input type="text" style="width: 98%;" value="Hello world!" /><br /><br /> 
     </div> 
    </div> 

가 사전에 감사합니다 다음과 같이

코드입니다.

고란

Answer 1

유사 예 : 기본 드래그하여

<script type="text/javascript"> 
      $(function() { 
       $(".draggable").draggable({ 
        revert: true, 
        helper: 'clone', 
        start: function (event, ui) { 
         $(this).fadeTo('fast', 0.5); 
        }, 
        stop: function (event, ui) { 
         $(this).fadeTo(0, 1); 
        } 
       }); 

       $("#droppable").droppable({ 
        hoverClass: 'active', 
        drop: function (event, ui) { 
         this.value = $(ui.draggable).text(); 
        } 
       }); 
      }); 
     </script> 

Answer 2

는 유형 input,textarea,button,select,option의 요소에 사용할 수 없습니다. cancel 옵션을 사용하여 변경/지울 수 있습니다.

근무 코드 :

$("#btnShow").click(function(e) { 
 
    $('#dialog').dialog("open"); 
 
}); 
 
$('#dialog').dialog({ 
 
    title: "Sample dialog", 
 
    resizable: false, 
 
    autoOpen: false, 
 
    width: 400, 
 
    height: 300, 
 
    buttons: [{ 
 
     text: "OK", 
 
     click: function() { /* do something */ } 
 
    }, 
 
    { 
 
     text: "Cancel", 
 
     click: function() { 
 
     $(this).dialog("close") 
 
     } 
 
    } 
 
    ] 
 
}); 
 
$('#divText1').draggable({ 
 
    cancel: null, 
 
    containment: "parent", 
 
    cursor: "move" 
 
}).resizable({ 
 
    containment: "parent", 
 
    handles: "e, w" 
 
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<input id="btnShow" type="button" value="Show" /> 
 

 
<div id="dialog" title="Dialog Box" style="border: solid 1px black; margin: 0px 0px 0px 0px; padding: 5px 0px 0px 5x;"> 
 
    <div id="divText1" style="width: 200px; height: 30px;"> 
 
    <input type="text" style="width: 98%;" value="Hello world!" /><br /><br /> 
 
    </div> 
 
</div>