前提・実現したいこと
プログラミング初心者です。
JSを反映させたいのですが、反映できません。
下記URLを参考にしています。
https://qiita.com/Hijiri-K/items/1a3f7137cf3186580447
<追記>
動きとしては、四角の枠内に画像をアップロードし(複数可)、枠内のみで画像をドラッグ&ドロップで自由移動できる、ということを行いたいです。
mts10806さまから
「#getphotoや#previewがhtml内にありません」とありますが、
htmlにどのように記述すればよろしいのでしょうか。
発生している問題・エラーメッセージ
エラーメッセージ等は特に出ていないです。
画面に反映されません。
該当のソースコード
<!-- new.html.erb --> <div class="corde-visual"> </div> <h1>コーデ登録</h1> <%= form_for(@corde_new) do |f| %> ▷コーデ名 <%= f.text_field :corde_name %> ▷シーズン <%= f.radio_button :season, "春" %> 春 <%= f.radio_button :season, "夏" %> 夏 <%= f.radio_button :season, "秋" %> 秋 <%= f.radio_button :season, "冬" %> 冬 <%= f.submit'保存' %> <% end %> <%= javascript_include_tag 'corde.js' %> -------------- <!-- corde.js --> var file = document.querySelector('#getphoto'); file.onchange = function (){ var fileList = file.files; if (file.files[0] == null) { document.querySelector('#preview').src = ""; } else { //読み込み var reader = new FileReader(); reader.readAsDataURL(fileList[0]); // ファイル複数個取得 var filesLength = files.length; //読み込み後 reader.onload = function () { document.querySelector('#preview').src = reader.result; $('#preview').css("display", "inline-block"); }; }; }; $("#preview").draggable({ containment: "parent", drag: function(e, ui) { $(".x_offset").text(ui.offset.left); $(".y_offset").text(ui.offset.top); } }); -------------------- <!-- application.js --> // This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require rails-ujs //= require activestorage //= require turbolinks -------------------- <!-- config/initializers/assets.rb --> # Be sure to restart your server when you modify this file. # Version of your assets, change this if you want to expire all your assets. Rails.application.config.assets.version = '1.0' # Add additional assets to the asset load path. # Rails.application.config.assets.paths << Emoji.images_path # Add Yarn node_modules folder to the asset load path. Rails.application.config.assets.paths << Rails.root.join('node_modules') # Precompile additional assets. # application.js, application.css, and all non-JS/CSS in the app/assets # folder are already added. # Rails.application.config.assets.precompile += %w( admin.js admin.css ) Rails.application.config.assets.precompile += %w( corde.js )
試したこと
サイト通り、再起動もかけました。
他の機能が影響しているかもと思い、消したり、書き順を変えたりもしました。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー