/* style */

img{display:block;width:100%;height:auto;}
.drag-box{width:50%;height:350px;background-color:#3bb3e0;margin:0 auto 50px;border:1px solid #2561b4;}
.drag{width:150px;height:150px;}

.handler{background:#333;color:#fff;text-align:center;font-size:12px;line-height:20px;}

.drag.drag-1{width:150px;height:150px;top:100px;}

.drag-box.drag-box-2{height:600px;}
.drag.drag-2{width:150px;height:150px;left:50%;margin-left:-75px;}

.drag.drag-4{width:150px;height:170px;}


.drag-box.drag-box-5{width:80%;margin:0 auto 0;}
.test{position:relative;width:50%;margin:0 auto 0;height:350px;padding:50px 0;background-color:#ddd;margin:0 auto 100px;border:1px solid #aaa;}
.test i{display:block;position:absolute;top:10px;left:10px;}


.log{width:50%;height:75px;line-height:25px;margin:0 auto 20px;font-size:16px;color:#333;}
.log span{color:#cb0000;}

/* 当点击拖动时，保证当前元素处于前端 */
.drag.on{z-index:9;}