JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <div>
    {{message}}
    <div id="drag-and-drop-zone">
      
    </div>
  </div>
</div>

CSS

#drag-and-drop-zone {
  width: 100px;
  height: 100px;
  background-color: tomato;
}

JavaScript

new Vue({
	el: '#app',
  data: function () {
  	return {
    	message: 'hello'
		}
  }
})

$('.drop-zone').on('dragover', function (event) {
	window.alert('hello');
});

$(document).ready(function(){
    $(window).on('dragenter', function(event){
        event.preventDefault();
    });
    $('#drag-and-drop-zone').bind('dragover', function(event){
    	event.preventDefault();
    	console.log('in drag and drop zone');
    });
    $('#drag-and-drop-zone').bind('dragleave', function(){
    	console.log('in drag and drop zone');
    });
});