<!DOCTYPE html>

<html lang="en" class="no-js">

	<head>

		<meta charset="UTF-8" />

		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>Drag and Drop Interaction Ideas | Icons</title>

		<meta name="description" content="Inspiration for drag and drop interactions for the modern UI" />

		<meta name="keywords" content="drag and drop, interaction, inspiration, web design, ui" />

		<meta name="author" content="Codrops" />

		<link rel="shortcut icon" href="../favicon.ico">

		<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />

		<link rel="stylesheet" type="text/css" href="css/icons.css" />

		<script src="js/modernizr.custom.js"></script>

	</head>

	<body class="skin-4" style="height: 100vh; background: red; margin: 0;">

		<div class="container">

			

			<div class="content">

				<ul id="list" class="list">

					<li class="list__item"><div class="drag-me"><i class="fa fa-fw fa-arrows"></i></div></li>

				</div>

				

			</div><!-- /content -->

		</div><!-- /container -->

		<div id="drop-area" class="drop-area">

			<div class="drop-area__item"><i class="fa fa-fw fa-trash"></i></div>

		</div>

		<script src="js/draggabilly.pkgd.min.js"></script>

		<script src="js/dragdrop.js"></script>

		<script>

			(function() {

				var body = document.body,

					dropArea = document.getElementById( 'drop-area' ),

					droppableArr = [], dropAreaTimeout;



				// initialize droppables

				[].slice.call( document.querySelectorAll( '#drop-area .drop-area__item' )).forEach( function( el ) {

					droppableArr.push( new Droppable( el, {

						onDrop : function( instance, draggableEl ) {

							// show checkmark inside the droppabe element

							classie.add( instance.el, 'drop-feedback' );

							clearTimeout( instance.checkmarkTimeout );

							instance.checkmarkTimeout = setTimeout( function() { 

								classie.remove( instance.el, 'drop-feedback' );

							}, 800 );

							// ...

						}

					} ) );

				} );



				// initialize draggable(s)

				[].slice.call(document.querySelectorAll( '#list .drag-me' )).forEach( function( el ) {

					new Draggable( el, droppableArr, {

						draggabilly : { containment: document.body },

						onStart : function() {

							// add class 'drag-active' to body

							classie.add( body, 'drag-active' );

							// clear timeout: dropAreaTimeout (toggle drop area)

							clearTimeout( dropAreaTimeout );

							// show dropArea

							classie.add( dropArea, 'show' );

						},

						onEnd : function( wasDropped ) {

							var afterDropFn = function() {

								// hide dropArea

								classie.remove( dropArea, 'show' );

								// remove class 'drag-active' from body

								classie.remove( body, 'drag-active' );

								

							};



							if( !wasDropped ) {

								afterDropFn();

							}

							else {

								// after some time hide drop area and remove class 'drag-active' from body

								clearTimeout( dropAreaTimeout );

								dropAreaTimeout = setTimeout( afterDropFn, 400 );

								alert('Xoa');

							}

						}

					} );

				} );

			})();

		</script>

	</body>

</html>

