Перетащите аудиоданные из parentNode div

Question

Я создаю образец пэда, где пользователи могут перетаскивать аудио фрагменты на один из нескольких div (образец pad). Когда пользователь выбирает, перетаскивает и отбрасывает звук, образец пэда должен получать аудиоданные.

Аудио теги обернуты внутри родительского div. Я использую jquery и javascript, чтобы сделать вещи перетаскиваемыми/droppable. У меня возникли проблемы с доступом к аудио из 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.