jquery.top-droppable实现拖拽拖放示例代码-html代码-BFW代码库

jquery.top-droppable实现拖拽拖放示例代码

代码语言：html

所属分类：拖放

代码描述：jquery.top-droppable实现拖拽拖放示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">

	
<style>
    @import url(http://fonts.useso.com/css?family=Roboto:300,400,700);
*,
*:after,
*::before {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
}

body {
	background: #34495e;
}

.container > header {
	color: #fff;
	font-family: 'Roboto', Arial, sans-serif;
	margin: 0 auto;
	padding: 2em 2em;
	padding-left: 370px;
	background: rgba(0,0,0,0.05);
}
.container > header h1 span{font-family: "微软雅黑"}
.container > header p{font-family: "微软雅黑";color: #fff;}
.container > header p a{color: #fff;text-decoration: none;}
.container > header p a:hover{color: #fff;text-decoration: underline;}
.container > header p a:active{color: #fff;text-decoration: none;}
.htmleaf-demo{
	position: absolute;
	margin: 0 auto;
	left: 25em;
	top: 10em;
}
#river{
	width: 423px; 
	height: 213px; 
	z-index: 1; 
	position: absolute; 
	left: 100px; 
	top: 100px; 
	background:url(//repo.bfw.wiki/bfwrepo/image/628427c4ca32c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90) 0 0 no-repeat;
}
#space{
	width: 423px; 
	height: 213px; 
	z-index: 2; 
	position: absolute; 
	left: 100px; 
	top: 350px; 
	background:url(//repo.bfw.wiki/bfwrepo/image/628427e09d621.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90) 0 0 no-repeat;
}
#storm{
	width: 423px; 
	height: 213px;
	z-index: 3; 
	position: absolute; 
	left: 550px; 
	top: 350px; 
	background:url(//repo.bfw.wiki/bfwrepo/image/6284286d59cbd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90) 0 0 no-repeat;
}
#draggable{
	width: 128px; 
	height: 128px; 
	z-index: 4; 
	position: absolu.........完整代码请登录后点击上方下载按钮下载查看