0
http://www.bbc.co.uk/과 같은 드래그 가능하고 정렬 가능한 효과를 만들고 싶습니다.BBC와 같은 드래그 가능한 정렬 가능 효과 만들기
그 때문에 Jquery UI를 사용하고 비슷한 효과를 얻었습니다.
하지만 합병증이있는 경우 BBC 웹 사이트에서 효과를 볼 수 있습니다. 부서를 선택하면 그 아래에 점선이 그어진 그림자가 나타나고 상자 간 이동이 거의 다릅니다.
Jquery UI를 사용할 때 <li>을 서로 나란히 놓아서 플로팅했지만 상자를 이동하면 이동 상자가 상자 사이에 삽입됩니다.
여기까지 지금까지 작성한 내용입니다. 하지만 그것은 BBC의 것이 아닙니다
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="js/lib/jquery.js"></script>
<script src="js/lib/ui.js"></script>
<script src="js/lib/widget.js"></script>
<script src="js/lib/utilities/mouse.js"></script>
<script src="js/lib/interactions/draggable.js"></script>
<script src="js/lib/interactions/sortable.js"></script>
<style>
* { margin:0;padding:0; }
body {
background:url(themes/default/images/background.gif);
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#wrapper {
width:980px;
margin: 0 auto;
border:1px #F00 solid;
}
.sublayout {
width:300px;
height:300px;
background:#aeadad;
border:1px #2495f5 solid;
float:left;
margin:1em;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
}
</style>
<script type="text/javascript">
$(function() {
$("#sortable").sortable({
revert: true
});
$("#draggable").draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid'
});
$("ul, li").disableSelection();
});
</script>
</head>
<body>
<div id="wrapper">
<ul id="sortable">
<li class="ui-state-default sublayout">Item 1</li>
<li class="ui-state-default sublayout">Item 2</li>
<li class="ui-state-default sublayout">Item 3</li>
<li class="ui-state-default sublayout">Item 4</li>
<li class="ui-state-default sublayout">Item 5</li>
</ul>
</div>
</body>
</html>