Jquery ui 创建一个像BBC一样的可拖动的可排序效果
我想创造一个拖拉和排序的效果,就像 为此,我使用了jQueryUI并获得了类似的效果 但复杂的是,如果你在BBC网站上看到效果,当你选择一个分区时,会出现一个阴影,阴影下面有一条虚线,方框之间的移动与我得到的非常不同 在使用Jquery UI时,我浮动了Jquery ui 创建一个像BBC一样的可拖动的可排序效果,jquery-ui,draggable,jquery-ui-sortable,Jquery Ui,Draggable,Jquery Ui Sortable,我想创造一个拖拉和排序的效果,就像 为此,我使用了jQueryUI并获得了类似的效果 但复杂的是,如果你在BBC网站上看到效果,当你选择一个分区时,会出现一个阴影,阴影下面有一条虚线,方框之间的移动与我得到的非常不同 在使用Jquery UI时,我浮动了,使它们并排出现,但当我移动框时,移动框会插入框之间 这是到目前为止我的代码。但这不是英国广播公司 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/
,使它们并排出现,但当我移动框时,移动框会插入框之间
这是到目前为止我的代码。但这不是英国广播公司
<!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>
无标题文件
*{边距:0;填充:0;}
身体{
背景:url(themes/default/images/background.gif);
字体系列:Verdana,日内瓦,无衬线;
字体大小:12px;
}
#包装纸{
宽度:980px;
保证金:0自动;
边框:1px#F00实心;
}
1.次级布局{
宽度:300px;
高度:300px;
背景:#aeadad;
边框:1px#2495f5实心;
浮动:左;
边缘:1米;
-moz盒阴影:0 20px黑色;
-webkit盒阴影:0 20px黑色;
盒影:0 20px黑色;
}
$(函数(){
$(“#可排序”)。可排序({
回复:真
});
$(“#可拖动”)。可拖动({
connectToSortable:“#可排序”,
助手:“克隆”,
回复:“无效”
});
$(“ul,li”).disableSelection();
});
第1项
第2项
第3项
第4项
第5项
我认为您需要3个列表(列)来创建这种效果。
看看这个演示: