我想实现拖拽层来控制层的显示位置,类型google的个性化设置,可以任意拖动,谁有控制层显示位置的控件吗?
Jquery的sortables插件
jquery插件dropanddrag
[url]http://demo.qooxdoo.org/current/portal/[/url]
自己在网上搜搜,可以找到下载链接
用jquery ui [url]http://jqueryui.com/[/url]
[code="java"]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
jQuery EasyUI<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style type="text/css">
.drag{
width:100px;
height:50px;
padding:10px;
margin:5px;
border:1px solid #ccc;
background:#AACCFF;
}
.dp{
opacity:0.5;
filter:alpha(opacity=50);
}
.over{
background:#FBEC88;
}
</style>
<script>
$(function(){
$('.drag').draggable({
proxy:'clone',
revert:true,
cursor:'auto',
onStartDrag:function(){
$(this).draggable('options').cursor='not-allowed';
$(this).draggable('proxy').addClass('dp');
},
onStopDrag:function(){
$(this).draggable('options').cursor='auto';
}
});
$('#target').droppable({
accept:'#d1,#d3',
onDragEnter:function(e,source){
$(source).draggable('options').cursor='auto';
$(source).draggable('proxy').css('border','1px solid red');
$(this).addClass('over');
},
onDragLeave:function(e,source){
$(source).draggable('options').cursor='not-allowed';
$(source).draggable('proxy').css('border','1px solid #ccc');
$(this).removeClass('over');
},
onDrop:function(e,source){
$(this).append(source)
$(this).removeClass('over');
}
});
});
</script>
<h1>DragDrop</h1>
<div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
drag me!
<div id="d1" class="drag">Drag 1</div>
<div id="d2" class="drag">Drag 2</div>
<div id="d3" class="drag">Drag 3</div>
</div>
<div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
drop here!
</div>
[/code]
建议也看看 jquery easyui的 droppable ,如此建议的代码即可实现你的要求。
这个用js也可以实现。
具体实现方法你上网能找到