laravel - Jquery UI draggable and resizeabl issue in dynamic creation -
i making 10 draggable , resizeable boxes first box draggable , resizable.
how can make boxes draggable , resizeable?
code:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script> $( function() { $( "#resizable" ).draggable().resizable(); }); </script> @for($i=0;$i<10;$i++) <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">user {{ $i }}</h3> </div> @endfor
use class instead of id
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script> $(document).ready(function(){ $( ".resizable").each(function(){ $(this).draggable().resizable(); }) }); </script> @for($i=0;$i<10;$i++) <div id="resizable{{ $i }}" class="resizable ui-widget-content"> <h3 class="ui-widget-header">user {{ $i }}</h3> </div> @endfor
Comments
Post a Comment