JSFiddle - React, Tailwind, and code Playground

by Munim Munna

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/lightness/jquery-ui-1.10.2.custom.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<div class="container">
  <div class="demo">
  <button id="ibutton">Enable Audio</button>
    <div id="draggable" class="ui-widget-content">
      <p>Drag me to my target</p>
    </div>
    <div id="droppable" class="ui-widget-header">
      <p>Drop here</p>
    </div>
  </div>
  <div class="demo-description" style="display: none; ">
    <p>Enable any DOM element to be droppable, a target for draggable elements.</p>
  </div>
</div>

<audio id="audio-drag"...

CSS

body {
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#draggable {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}

#droppable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
}

JavaScript

function enable_audio(el){
    var myaudio=el[0];
    if(el.data('audio_enabled'))return;
    myaudio.currentTime=myaudio.duration-1;
    myaudio.play().then(function(){myaudio.pause();myaudio.load();});
    el.data('audio_enabled',true);
}
$(function() {
	$("#ibutton").click(function(){
  	enable_audio($('#audio-drag'));
  	enable_audio($('#audio-drop'));
  });
  $("#draggable").draggable({
    start: function() {
      $("#audio-drag")[0].play();
    }
  });
  $("#droppable").droppable({
    drop: function(event, ui) {
      $("#audio-drop")[0].play();
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    }
  });
});