Drop Textbox auf Tabelle mit Jquery

Ich habe eine table erstellt, die ziehbare und dropable mit jQuery und ich habe auch Textbox erstellt, die ziehbare ist. Wenn meine Textbox auf eine table cell abgelegt wird, möchte ich die Zelle die Größe entsprechend der Größe der Textbox anpassen. Ist das möglich? Bitte helfen Sie?Drop Textbox auf Tabelle mit Jquery

Dies ist der Code, den ich versucht habe:

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

Quelle

2016-04-13 Abhishek Kumar

Dies kann wie so geschehen:

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 
    }); 
});

Problem hier, dass es nicht an den Tisch hängen. Also, wenn Sie es bewegen, ist die input immer noch in Position.

In Bezug auf die Größe wird die Zelle angepasst, nicht jedoch die Tabellengröße. Das input ist breiter als 100px, also dehnt es die Zelle zu seinem Maximum und kann nicht mehr tun.

Quelle

2016-04-14 17:36:05 Twisty

Antwort

Verwandte Themen