html5拖拽圖片上傳html5文件拖拽上傳html5拖拽上傳圖片



106 420 141



特效描述:html5 拖拽圖片上傳 文件拖拽上傳 拖拽上傳圖片,html5拖拽上傳圖片代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<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/demo.css" />
<link rel="stylesheet" type="text/css" href="css/bottom-area.css" />

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/draggabilly.pkgd.min.js"></script>
<script type="text/javascript" src="js/dragdrop.js"></script>

3. HTML代碼

<div class="content">
	<header class="codrops-header">
		<h1>拖放交互設計</h1>
		<nav class="codrops-demos">
			<a class="current-demo" href="index.html">Bottom Area</a>
			<a href="sidebar.html">Sidebar</a>
			<a href="page-scale.html">Page Scale</a>
			<a href="modal.html">Modal</a>
			<a href="icons.html">Icons</a>
			<a href="bottom-slide.html">Bottom Slide</a>
			<a href="reveal.html">Reveal</a>
		</nav>
	</header>
	<div id="grid" class="grid clearfix">
		<div class="grid__item"><i class="fa fa-fw fa-image"></i></div>
		<div class="grid__item"><i class="fa fa-fw fa-image"></i></div>
		<div class="grid__item"><i class="fa fa-fw fa-image"></i></div>
		<div class="grid__item"><i class="fa fa-fw fa-image"></i></div>
		<div class="grid__item"><i class="fa fa-fw fa-image"></i></div>
		<div class="grid__item"><i class="fa fa-fw fa-image"></i></div>
		<div class="grid__item"><i class="fa fa-fw fa-image"></i></div>
		<div class="grid__item"><i class="fa fa-fw fa-image"></i></div>
		<div class="grid__item"><i class="fa fa-fw fa-image"></i></div>
		<div class="grid__item"><i class="fa fa-fw fa-image"></i></div>
		<div class="grid__item"><i class="fa fa-fw fa-image"></i></div>
		<div class="grid__item"><i class="fa fa-fw fa-image"></i></div>
	</div>
</div><!-- /content -->
<div id="drop-area" class="drop-area">
	<div>
		<div class="drop-area__item"><div class="dummy"></div></div>
		<div class="drop-area__item"><div class="dummy"></div></div>
		<div class="drop-area__item"><div class="dummy"></div></div>
		<div class="drop-area__item"><div class="dummy"></div></div>
	</div>
</div>
<div class="drop-overlay"></div>
<script type="text/javascript">
(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( '#grid .grid__item' )).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 );
				}
			}
		} );
	} );
})();
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片拖動 圖片拖拽 頭像上傳 圖片上傳 文件上傳
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子