angular实现拖拽排序效果代码-html代码-BFW代码库

angular实现拖拽排序效果代码

代码语言：html

所属分类：拖放

代码描述：angular实现拖拽排序效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
<style>
    body {
	background-color:#708a90;
	color:#282828;
	text-align:center;
	font-family:sans-serif
}
.grid {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-ms-flex-direction:row;
	flex-direction:row;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap
}
.item {
	width:22%;
	margin:1.4%;
	height:100px;
	border:1px solid rgba(255,255,255,0.3);
	border-radius:3px;
	box-shadow:0 2px rgba(100,100,100,0.8);
	background-color:rgba(255,255,255,0.4);
	cursor:move;
	-webkit-transition:all 250ms ease;
	transition:all 250ms ease
}
.item--dragOver {
	border:1px solid rgba(255,255,255,0.8)
}
.item--dragged {
	opacity:.6;
	-webkit-transform:scale(0.9,0.9);
	transform:scale(0.9,0.9)
}

</style>
</head>

<body>
    <div ng-app="dragable">
        <h3>Angular Drag'n'Drop</h3>
        <div class="grid">
            <div class="item" drag>
                <h3>1</h3>
            </div>
            <div class="item" drag>
                <h3>2</h3>
            </div>
            <div class="item" drag>
                <h3>3</h3>
            </div>
            <div class="item" drag>
                <h3>4</h3>
            </div>
            <div class="item" drag>
                <h3>5</h3>
            </div>
            <div class="item" drag>
                <h3>6</h3>
            </div>
            <div class="item" drag>
                <h3>7</h3>
            </div>
            <.........完整代码请登录后点击上方下载按钮下载查看