问题描述
我想实现拖拽层来控制层的显示位置,类型google的个性化设置,可以任意拖动,谁有控制层显示位置的控件吗?
解决方案
Jquery的sortables插件
解决方案二:
这个用js也可以实现。具体实现方法你上网能找到
解决方案三:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><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></head><body><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></body></html>建议也看看 jquery easyui的 droppable ,如此建议的代码即可实现你的要求。
解决方案四:
用jquery ui http://jqueryui.com/
解决方案五:
http://demo.qooxdoo.org/current/portal/自己在网上搜搜,可以找到下载链接
解决方案六:
jquery插件dropanddrag