我正在构建一个示例板,用户可以将音频片段拖放到几个div(样本板)中的一个上。当用户选择,拖放和丢弃音频时,示例板应该获得音频数据。
音频标签包含在父div中。我正在使用jquery和javascript来使事物可拖动/可拖放。我无法从parentNode('#sound_ [number])访问音频。
如何使整个div可拖动,但只传输div内的音频数据?
HTML:
<!-- sample pad -->
<div id="pad_container">
<div class="pads" id="pad1" ondrop="drop(event)" ondragover="allowDrop(event)">Q</div>
<div class="pads" id="pad2" ondrop="drop(event)" ondragover="allowDrop(event)>W</div>
<div class="pads" id="pad3" ondrop="drop(event)" ondragover="allowDrop(event)>E</div>
<div class="pads" id="pad4" ondrop="drop(event)" ondragover="allowDrop(event)>R</div>
<div class="pads" id="pad5" ondrop="drop(event)" ondragover="allowDrop(event)>P</div>
<div class="pads" id="pad6" ondrop="drop(event)" ondragover="allowDrop(event)>O</div>
<div class="pads" id="pad7" ondrop="drop(event)" ondragover="allowDrop(event)>I</div>
<div class="pads" id="pad8" ondrop="drop(event)" ondragover="allowDrop(event)>U</div>
</div>
<!-- sounds from database -->
<div class="sounds" class="small-block-grid-2">
<ul id="ordered" class="small-block-grid-2">
<% @sounds.each do |sound| %>
<div class="sound_tags ui-widget-content">
<li class="sound_grid_name">
<!-- we want just part of the sound name -->
<%= link_to (truncate sound.sound_name.upcase, length: 8), sound_path(sound), class: "sound_name" %> <a href="#" id="plus_sign">+</a></li>
<li class="sound_rating" alt="rating"><%= sound.ratings %></li>
<!-- any user can download sound logged in/out -->
<li><%= link_to (image_tag "download.svg", class: "download_btn", alt: "download"), download_path(sound.id), :method => :get, class: "download_btn" %>
</li>
<!-- user can preview the sound -->
<li>
<a class="playback" href="#">
<%= image_tag "playbutton.svg", class: "play_btn" %>
</a>
<%= audio_tag preview_path(sound.id), id: "preview_btn" %>
</li>
<!-- user can rate the sound if logged in -->
<li><%= render partial: 'sounds/rating', locals: {sound: sound} %></li>
</div>
<% end %>
</ul>
<div id="view_all"><%= link_to "View All", sounds_path, style: "color: white;" %></div>
</div>
使用Javascript:
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("audio/mpeg", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("audio/mpeg");
ev.target.appendChild(document.getElementById(data));
console.log("Drop success");
}
$(function() {
// add incremental ids to each sound
$('#ordered div').each(function(i,el){
el.id = "sound_" + (i+1);
el.draggable = "true";
el.ondragstart = "drag(event)";
});
$(".playback").click(function(e) {
e.preventDefault();
// This next line will get the audio element
// that is adjacent to the link that was clicked.
var song = $(this).next('audio').get(0);
song.play();
});
});
</script>