jquery'yi kullanarak tablodaki metin kutusunu bırakın

jQuery kullanarak sürüklenebilir ve bırakılabilir bir table oluşturdum ve ayrıca sürüklenebilir bir metin kutusu oluşturdum. Metin kutum table cell üzerine düştüğünde, hücrenin boyutunu metin kutusunun boyutuna göre ayarlamasını istiyorum. Mümkün mü? Lütfen yardım et?jquery'yi kullanarak tablodaki metin kutusunu bırakın

<!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>

kaynak

2016-04-13 Abhishek Kumar

Bu yüzden gibi yapılabilir:

https://jsfiddle.net/dqg2r6xx/

jQuery burada

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

Sorun öyle mi

denedim kodudur tabloya bağlı değil. Bu yüzden onu hareket ettirirseniz, input hala yerinde. Boyutlandırma ile ilgili olarak, hücreyi ayarlıyor, ancak tablo boyutunu değil. input, 100px'dan daha geniştir, bu nedenle hücreyi maksimuma uzatır ve daha fazlasını yapamaz.

kaynak

2016-04-14 17:36:05 Twisty

jquery'yi kullanarak tablodaki metin kutusunu bırakın

cevap

İlgili konular