jqueryを使用してテーブルにテキストボックスをドロップ

私はtableを作成しました。これはjQueryを使用してドラッグ可能でドロップ可能で、ドラッグ可能なテキストボックスも作成しました。私のテキストボックスがtable cellにドロップされたら、テキストボックスのサイズに合わせてセルのサイズを調整します。これは可能ですか？助けてください？jqueryを使用してテーブルにテキストボックスをドロップ

<!DOCTYPE html> 
<html> 
    <head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    </head> 
    <body> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('input').draggable({ 
      cancel: null 
     }); 
     $('tr>td').droppable({ 
      drop: function(event, ui) { 
      $(this).html('droped'); 
      } 
     }); 
     $('table').draggable({ 
      cancel: null 
     }); 
     }); 
    </script> 
    <input type="text" id="draggable"></input> 
    <table id="droppable" border="1" style="height: 100px;width: 200px"> 
     <tr> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td></td> 
     </tr> 
    </table> 
    </body> 
</html>

出典

2016-04-13 Abhishek Kumar

これがそうのように行うことができます：

https://jsfiddle.net/dqg2r6xx/

jQueryのここ

$(document).ready(function() { 
    $('input').draggable({ 
    cancel: null 
    }); 
    $('#droppable td').droppable({ 
    accept: "input", 
    drop: function(event, ui) { 
     $(this).html('droped'); 
    } 
    }); 
    $('table').draggable({ 
    cancel: null 
    }); 
});

問題はそれということである

この

は、私が試してみましたコードですテーブルには付いていません。したがって、あなたがそれを動かすと、 inputは依然として正しい位置にあります。

サイジングに関しては、セルを調整していますが、テーブルサイズは調整していません。 inputは100pxよりも広いので、セルを最大に伸ばし、それ以上はできません。

出典

2016-04-14 17:36:05 Twisty

jqueryを使用してテーブルにテキストボックスをドロップ

答えて

関連する問題