来个可拖动HTML自定义模板代码！

nisersent 2008-08-28 12:07:14
类似新浪BLOG那种可拖动的自定义模板如何做？
比如"网站公告","日历控件"这些固定的模板,可在后台用鼠标自定义位置,
最好还带有沾粘效果的,求高手给完整代码代码.
...全文
370 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
lyboyc 2008-09-04
  • 打赏
  • 举报
 回复
也发我lyboyc@163.com
研究下，谢谢
dujun3245350 2008-09-04
  • 打赏
  • 举报
 回复
我已经给你们发了
dujun3245350 2008-09-04
  • 打赏
  • 举报
 回复
给你发了
x37623412 2008-08-29
  • 打赏
  • 举报
 回复
发邮箱 37623412@qq.com
dujun3245350 2008-08-28
  • 打赏
  • 举报
 回复
if(!finded){
for(var i = 0; i < CoolDrag.container.childNodes.length; i++){
var o = CoolDrag.container.childNodes[i];
if(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft && getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft)
o.appendChild(CoolDrag.obj);
}
}
with(CoolDrag.shadow.style){
left = (CoolDrag.cloneobj.offsetLeft + 4) + "px";
top = (CoolDrag.cloneobj.offsetTop + 4) + "px";
}
//document.title = CoolDrag.cloneobj.style.left + "|" + CoolDrag.shadow.style.left;
},

end:function(e){
if(!CoolDrag.dragged)return;
CoolDrag.obj.className = "dragLayer";
CoolDrag.dragged = false;
CoolDrag.shadow.parentNode.removeChild(CoolDrag.shadow);
CoolDrag.timer = CoolDrag.repos(150,15);

//保存cookie
var str="";
for(var i=0; i<CoolDrag.container.childNodes.length; i++){
var o = CoolDrag.container.childNodes[i];
if(i>0)str += "|";
str += o.id + ":";
for(var j=0; j < o.childNodes.length; j++){
if(j>0)str += ",";
str += o.childNodes[j].id ;
}
}
CoolDrag.save("cooldrag",str,24);
},
repos:function(aa,ab){
//var f=CoolDrag.obj.filters.alpha.opacity;
var tl=getRealLeft(CoolDrag.cloneobj);
var tt=getRealTop(CoolDrag.cloneobj);
var kl=(tl-getRealLeft(CoolDrag.obj))/ab;
var kt=(tt-getRealTop(CoolDrag.obj))/ab;
//var kf=f/ab;
return setInterval(function(){if(ab<1){
clearInterval(CoolDrag.timer);
CoolDrag.cloneobj.parentNode.removeChild(CoolDrag.cloneobj);
CoolDrag.obj=null;
return;
}
ab--;
tl-=kl;
tt-=kt;
//f-=kf;
CoolDrag.cloneobj.style.left=parseInt(tl)+"px";
CoolDrag.cloneobj.style.top=parseInt(tt)+"px";
//CoolDrag.tdiv.filters.alpha.opacity=f;
}
,aa/ab)
},
min:function(e){
if(!e) e = window.event;
var obj = getT(e);
var rootObj = obj.parentNode.parentNode.parentNode;
var id = rootObj.id;
if(SavedObject.getStatus(id)[1]){
SavedObject.setStatus(id,0);
rootObj.style.height = "20px";
rootObj.childNodes[1].style.display = 'none';
}else{
SavedObject.setStatus(id,1);
rootObj.lastChild.style.display = '';
rootObj.style.height = SavedObject.getStatus(id)[2];
}
obj.innerHTML = obj.innerHTML==0 ? 2 :0;
},

close:function(e){
if(!e) e = window.event;
var obj = getT(e);
var rootObj = obj.parentNode.parentNode.parentNode;
rootObj.parentNode.removeChild(rootObj);
},
save:function(name, value, hours){
var expire = "";
if(hours != null)
{
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire;
},
read:function(name){
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0)
{
offset = document.cookie.indexOf(search);
if (offset != -1)
{
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
}

function $(id){
return document.getElementById(id);
}

function getT(e){
return e.target || e.srcElement;
}

function getMouseX(e){
return e.pageX ? e.pageX : e.clientX + document.body.scrollLeft - document.body.clientLeft;
}

function getMouseY(e){
return e.pageY ? e.pageY : e.clientY + document.body.scrollTop - document.body.clientTop;
}

function getRealLeft(o){
var l = 0;
while(o){
l += o.offsetLeft - o.scrollLeft;
o = o.offsetParent;
}
return(l);
}

function getRealTop(o){
var t = 0;
while(o){
t += o.offsetTop - o.scrollTop;
o = o.offsetParent;
}
return(t);
}

function cleanWhitespace(node) {
var notWhitespace = /\S/;
for (var i=0; i < node.childNodes.length; i++) {
var childNode = node.childNodes[i];
if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {
node.removeChild(node.childNodes[i]);
i--;
}
if (childNode.nodeType == 1) {
cleanWhitespace(childNode);
}
}
}

var SavedObject={
elements : new Array(),
setStatus : function(id,s){
for(var i=0;i<SavedObject.elements.length;i++){
if(SavedObject.elements[i][0]==id){
SavedObject.elements[i][1]=s;
break;
}
}
},
getStatus : function(id){
for(var i=0;i<SavedObject.elements.length;i++){
if(SavedObject.elements[i][0]==id)return SavedObject.elements[i];
}
},
push : function(o){
SavedObject.elements[SavedObject.elements.length]=o;
}
}

</script>
</head>
dujun3245350 2008-08-28
  • 打赏
  • 举报
 回复
cleanWhitespace(CoolDrag.container)//清除空白节点
var collection = CoolDrag.container.getElementsByTagName("DIV");
for(var i = 0; i < collection.length; i++){
if(collection[i].className == "dragLayer"){
var o = collection[i].firstChild;
SavedObject.push([o.parentNode.id,1,o.parentNode.style.height]);
o.onmousedown = CoolDrag.start;
}
}
document.onmousemove = CoolDrag.drag;
document.onmouseup = CoolDrag.end;
},

start:function(e){
if(!e) e = window.event;
var obj = getT(e);
if(obj.className == "min"){
CoolDrag.min(e);
return;
}else if(obj.className == "close"){
CoolDrag.close(e);
return;
}else{
if(obj.className != "dragHeader") obj = obj.parentNode;
}
CoolDrag.dragged = true;
CoolDrag.obj = obj.parentNode;
CoolDrag.cloneobj = CoolDrag.obj.cloneNode(true);
document.body.appendChild(CoolDrag.cloneobj);
CoolDrag.shadow = document.createElement("DIV");
document.body.appendChild(CoolDrag.shadow);
with(CoolDrag.cloneobj.style){
position = "absolute";
zIndex = 1000;
left = getRealLeft(CoolDrag.obj) + "px";
top = getRealTop(CoolDrag.obj) + "px";
}
with(CoolDrag.shadow.style){
position = "absolute";
zIndex = 999;
left = getRealLeft(CoolDrag.obj) + 4 + "px";
top = getRealTop(CoolDrag.obj) + 4 + "px";
width = CoolDrag.obj.offsetWidth + "px";
height = CoolDrag.obj.offsetHeight + "px";
backgroundColor = "#ccc";
if(navigator.userAgent.indexOf("Gecko") != -1)
MozOpacity = "0.5";
else if(navigator.userAgent.indexOf("MSIE") != -1)
filter = "alpha(opacity=50)";
}


CoolDrag.cloneobj.initMouseX = getMouseX(e);
CoolDrag.cloneobj.initMouseY = getMouseY(e);
CoolDrag.cloneobj.initoffsetL = getRealLeft(CoolDrag.obj);
CoolDrag.cloneobj.initoffsetY = getRealTop(CoolDrag.obj);
//change style
CoolDrag.cloneobj.firstChild.className="dragHeader_over";
CoolDrag.cloneobj.className = "dragLayer_over";
CoolDrag.obj.className="clone_dragLayer_over";
},

drag:function(e){
if(!CoolDrag.dragged||CoolDrag.obj==null)return;
if(!e) e = window.event;
var currenX = getMouseX(e);
var currenY = getMouseY(e);

if(CoolDrag.cloneobj.initoffsetL + currenX - CoolDrag.cloneobj.initMouseX > getRealLeft(CoolDrag.container))
CoolDrag.cloneobj.style.left = (CoolDrag.cloneobj.initoffsetL + currenX - CoolDrag.cloneobj.initMouseX) + "px";
else
CoolDrag.cloneobj.style.left = getRealLeft(CoolDrag.container) + "px";
if(CoolDrag.cloneobj.initoffsetY + currenY - CoolDrag.cloneobj.initMouseY > getRealTop(CoolDrag.container))
CoolDrag.cloneobj.style.top = (CoolDrag.cloneobj.initoffsetY + currenY - CoolDrag.cloneobj.initMouseY) + "px";
else
CoolDrag.cloneobj.style.top = getRealTop(CoolDrag.container) + "px";

var collection = CoolDrag.container.getElementsByTagName("DIV");
var finded = false;
for(var i = 0; i < collection.length; i++){
var o = collection[i];
if(o.className == "dragLayer"){
if(((getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft && getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft) ||
(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth &&
getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth)) &&
getRealTop(o) <= CoolDrag.cloneobj.offsetTop && getRealTop(o) + o.offsetHeight >= CoolDrag.cloneobj.offsetTop)
{
//window.status = getRealTop(o.parentNode)+"|"+(CoolDrag.cloneobj.offsetTop - 8);
if(getRealTop(o.parentNode) >= CoolDrag.cloneobj.offsetTop - 8){
o.parentNode.insertBefore(CoolDrag.obj,o);
}else{
if(o.nextSibling)
o.parentNode.insertBefore(CoolDrag.obj,o.nextSibling);
else
o.parentNode.appendChild(CoolDrag.obj);
}
finded = true;
break;
}
}
}
dujun3245350 2008-08-28
  • 打赏
  • 举报
 回复
<!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=gb2312">
<title>Drag & Drop</title>
<style type="text/css">
body{ background-color:#36393D; font-size:12px; margin:0px; }
DIV.dragLayer{
border:1px solid #369;
background-color:#6BBA70;
margin-bottom:10px;
}
DIV.dragLayer_over{
border:1px solid #C79810;
background-color:#6BBA70;
filter:alpha(opacity=80);
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
}
DIV.clone_dragLayer_over{
border:1px dashed #FA0;
background-color:#6BBA70;
filter:alpha(opacity=80);
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
margin-bottom:10px;
}
DIV.dragHeader{
width:100%; height:20px ; line-height:20px; background-color:#006E2E; color:#FFFFFF;
}
DIV.dragHeader_over{
width:100%; height:20px ; line-height:20px; background-color:#C79810;
}

SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings}
#container{margin:0px}
#leftcontainer{float:left; width:33%;}
#middlecontainer{float:left; width:34%;}
#middlecontainer div{margin-left:auto; margin-right:auto}
#rightcontainer{float:right; width:33%;}
#rightcontainer div{float:right}
DIV.content{width:100%; padding:4px}
</style>
<script type="text/javascript">
var CoolDrag={
obj : null, //目标对象
cloneobj : null, //拖动对象
container : null, //容器
dragged : false, //拖动标志
shadow: null, //阴影

init:function(id){
CoolDrag.container = $(id);
var cooldrag = CoolDrag.read("cooldrag");
if(cooldrag != ""){//读取cookie
var subcontainer = cooldrag.split("|");
alert(subcontainer+":::subcontainer::::");
for(var i=0 ; i < subcontainer.length; i++){
var subcontainerItem = subcontainer[i].split(":");
alert(subcontainerItem+":::subcontainerItem::::");
if($(subcontainerItem[0])){
var items = subcontainerItem[1].split(",");
for(var j=0; j< items.length; j++){
if($(items[j])) $(subcontainerItem[0]).appendChild($(items[j]));
}
}
}
}
miaoliujun 2008-08-28
  • 打赏
  • 举报
 回复
建议看下portal
nisersent 2008-08-28
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 dujun3245350 的回复:]
这个代码我刚用过的，可能是发上去的时候粘错了
[/Quote]
email:nisersent@sina.com
发我EMAIL里吧.
sxntree 2008-08-28
  • 打赏
  • 举报
 回复
好长,呵呵,学一学
dujun3245350 2008-08-28
  • 打赏
  • 举报
 回复
这个代码我刚用过的，可能是发上去的时候粘错了
dujun3245350 2008-08-28
  • 打赏
  • 举报
 回复
代码太长了，一次发不上去，烦人了
nisersent 2008-08-28
  • 打赏
  • 举报
 回复
错误：'CoolDrag'未定义
nisersent 2008-08-28
  • 打赏
  • 举报
 回复
不能拖动。。。
楼上的，速度啊。。。。
dujun3245350 2008-08-28
  • 打赏
  • 举报
 回复
你把这个代码看看行吧
dujun3245350 2008-08-28
  • 打赏
  • 举报
 回复
<body onLoad="CoolDrag.init('container');">
<br />
<div id="container">
<div id="leftcontainer">
<div style="height:100px; width:200px; " class="dragLayer" id="win1">
<div class="dragHeader">
<div style="float:left">第一个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 1</div>
</div>
<div style="height:100px; width:200px; " class="dragLayer" id="win2">
<div class="dragHeader">
<div style="float:left">第二个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 2</div>
</div>
</div>
<div id="middlecontainer">
<div style="height:100px; width:200px; " class="dragLayer" id="win3">
<div class="dragHeader">
<div style="float:left">第三个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 3</div>
</div>
<div style="height:100px; width:200px; " class="dragLayer" id="win4">
<div class="dragHeader">
<div style="float:left">第四个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 4</div>
</div>
</div>
<div id="rightcontainer">
<div style="height:100px; width:200px; " class="dragLayer" id="win5">
<div class="dragHeader">
<div style="float:left">第五个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 5</div>
</div>
<div style="height:100px; width:200px; " class="dragLayer" id="win6">
<div class="dragHeader">
<div style="float:left">第六个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 6</div>
</div>
<div style="height:100px; width:200px; " class="dragLayer" id="win7">
<div class="dragHeader">
<div style="float:left">第七个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 7</div>
</div>
</div>
</div>
</body>
</html>
nisersent 2008-08-28
  • 打赏
  • 举报
 回复
楼上的，怎么没有了？？？？？？？？
ELline拖拽式网站系统ASP版 v1.0
ELline拖拽式网站系统ASP版是一款asp的拖拽式布局网站系统。你是不是在找一款拖拽式智能建系统呢，是不是百度了很久也没有找到，要不就是收费加密的。现在首款ASP拖拽式布局网站系统站长之家独家发布!请用于学习进步,体验新功能如果需要直接使用建议还是下载EL的正式版吧,愿你能在拖拽式网站系统此基础上开发出更强大的程序来.模块自定义添加删除，真正实现前台可视化操作，独创的CSS样式设计器，（支持CSS3）直接生成标准的CSS代码，你一定会喜欢上这个系统的。业内的拖拽式网站主要是PHP的， 这是第一款ASP版的.而EL在上面完善优化了很多拖拽细节：有轨道式拖拽，更安全合理，以往我们在使用其它拖拽建站程序时，总时感觉拖不到位，不是左了一点就是右了一点，EL直接拖动你需要的容器，自动定位好。页面模块元素，即时生成标准的HTML代码，不产生任何垃圾代码。EL把用户所有的模块保存到数据库中在即时的生成处理中HTML模板。页面内容的调用，EL的内容调用是最灵活的，可以方便的调用网站内的任何内容，高手可以编写自己的SQL语法，甚至你可以直接写函数进去也能直接运行。CSS样式编辑器，EL首创，目前市场
【guiplan2.0教程】可视化布局一键生成web前端代码
生成之后的代码符合w3c规范，除了学会软件的使用以外，我们还能学到前端html结构搭建，拖拽调整html结构，css常用样式可视化的配置，以及交互功能vue可视化配置，简单的代码编写以及可视化数据绑定，事件绑定等。...
Argo 水平和垂直样式管理后台模板UI框架
Agroxa是一个功能齐全、多用的管理后台Html模板，建立在Bootstrap4,JQuery CSS3和HTML5。充分响应自适用手机端设备的后台模板，有很干净的用户界面和很多js组件,部件,UI元素。代码超级干净,可以很容易地定制,很容易转化为任何类型的web应用程序，包括自定义管理面板,数据分析仪表盘,电子商务后端、CMS、CRM或任何SASS面板。 主要特色 响应布局(台式电脑、平板电脑、移动设备) 用Bootstrap4.1.3 水平和垂直布局 清洁、平面设计 3配色方案布局 HTML5和CSS3 支持SASS 小,黑暗与用户侧栏布局 登录、注册、错误页面 日程表视图 表单验证 拖拽区文件上传 Summernote编辑器 5+图表库 datatable
ELline手机微网站系统 v2.0.zip
PC网站 手机网站 微信公众平台=ELline手机微网站系统 (三网合一,统一数据管理更方便) 无论是什么上网设备都能友好的访问您的企业网站!不错过任何一个客户. 帮助您快速进入企业移动互联网时代!   后台地址： http://你的域名/server/ 密码：123456   系统采用智能识别技术! 网址全不变，同一数据库,不跳转 无需新网址，用户在手机上使用原网址打开网站便可直接进入手机版网站，不需要二次跳转，搜索引擎更加友好,符合手机版搜索引擎标准.   ELline手站微网站系统程序特点： 优化方面 程序采用伪静态技术，全HTML静态页面输出，每个页面您可以设置关键字及描述标签，更重要的是，您还可以自定义每个HTML页面的文件名，设定页面的优先权比值。每个栏目的目录名也可以是随意去设置的。页面关键字提取功能等 系统灵活度方面 内置了表单系统，您可以创建出各种样式的表单来，还可以通过短信或者邮件直接把表单数据直接发送您。还有一张自定义数据表，发挥您的想像来创建你小功能（比如一个广告轮播程序，在线客服等，在配合前端的JS脚本输出，就达到了后台的管理），当然每个网站所需字段可能也会不一样，内容都采用了自定义字段功能。 内容输出 后台程序与模板分离技术，全站采用标签输出数据，标签后台创建管理，当然你习惯了写程序代码的小朋友们也可以直接在HTML模板中写入代码脚本，如果这也不能满足你的要求，那你还可以在后台创建一个函数，放入模板中也可以运行。 高级 你知道吧，用ELline你还可以设计出一个拖拽式的功能网站,支持CSS可视化编辑,简单介绍下吧 {$SKCMS_administratorAPI} 这是一个拖拽式管理标签,加入模板中,到后台开启前台界面维护, 这里有一个拖拽的例子 http://你的域名/?c-diy.html 更多功能还是你慢慢去发现吧...
Web 开发

81,095

社区成员

341,712

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章