从 parentNode div 拖放音频数据

Question

我正在构建一个示例板，用户可以在其中将音频 sn-ps 拖放到几个 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>

Answer 1

试试http://jqueryui.com/draggable/ Draggable Jquery 库。