いつもお世話になっております。
BOOTSTRAP4の基本的な構造(starter-template)にjQuery-uiのresizableを合わせると、ドラッグ時にブルブルと動き、もともと要素があった場所から移動してしまいます。
なにか解決方法をご存知ではないでしょうか?
jquery-uiとbootstrapの相性が悪いということでしたら、jquery-uiに変わる、以下の要件を満たしているプラグインを教えていただければ幸いです。
- 左右でリサイズができる
- グリッド指定ができる
- リサイズスタートストップのコールバックが可能
何卒、よろしくお願いいたします。
今回の検証の環境は
macOSX 10.13.4 chrome 65.0.3325.181 safari 11.1
で確認し同現象がおきております。
以下ソースになります。
<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <style> #jquery-ui-resizable { margin:50px; width: 300px; height: 100px; padding: 0.5em; } #jquery-ui-resizable h3 { text-align: center; margin: 0px 0px 0.5em 0px; } </style> </head> <body> <div id="jquery-ui-resizable" class="ui-widget-content"></div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $(function () { $('#jquery-ui-resizable').resizable({ minHeight: 100, minWidth: 270, maxHeight: 100, maxWidth: 600, grid: 25, handles: 'w,e', stop: function( event, ui ) { } }); }); </script> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/10 04:36