0

私はjqueryが初めてです。jqueryを使用してテキストボックスをドラッグしてサイズ変更しようとしています。しかし、私はいくつかの問題に直面しています。テキストボックスをドラッグしてサイズを変更できました。しかし..下のスクリーンショットを見てください。 ここに画像の説明を入力

テキスト ボックスをドラッグするには、まず、その「エッジ」(矢印で表示) をボックスの外にドラッグして移動する必要があります。結局のところ、それは良い考えではありません。それで、誰かがテキストボックスをドラッグするのを手伝ってくれますか?

以下は私のコードです

    <html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Draggable - Constrain movement</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />


<style>
  #containment-wrapper { width: 300px; height:300px; border:2px solid #ccc; padding: 10px; }
  #custombox { width: 160px; height: 30px; padding: 0.5em; float: left; }
</style>

<script>
  $(function() 
  {    
    $("#custombox").draggable({ containment: "#containment-wrapper", scroll: false }).resizable(); 
  });
</script>

<body>

<div id="containment-wrapper">
  <div id="custombox" >
    <textarea></textarea> </p>
  </div>
</div>
</body>

</html>

jsfiddle.net でコードを試したところ、テキスト ボックスはドラッグできません。リサイズのみ可能です。しかし、コードをメモ帳にコピーして、クロムで実行しました。すると、スクリーンショットの問題が現れました。テキスト ボックスの外側の端をドラッグした後、ボックスをコンテインメント内の任意の場所にドラッグできます。

4

1 に答える 1