`
liss
  • 浏览: 842782 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

一款可以用来实现网页拖拽得HTML代码

阅读更多
<style> .dragTable { border-top: 1px solid #3366cc; margin-bottom: 10px; width: 100%; background-color: #FFFFFF; }

td { vertical-align: top; }

.dragTR { cursor: move; color: #7787cc; text-decoration: underline; background-color: #e5eef9; padding: 10px 0 10px 5px; font-weight: bold; }

#parentTable { border-collapse: collapse; letter-spacing: 25px; } </style>

<script defer language="jscript">

var Drag={dragged:false,

ao:null,

tdiv:null,

dragStart:function(){

Drag.ao=event.srcElement;

if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){

Drag.ao=Drag.ao.offsetParent;

Drag.ao.style.zIndex=100;

}else

return;

Drag.dragged=true;

Drag.tdiv=document.createElement("div");

Drag.tdiv.innerHTML=Drag.ao.outerHTML;

Drag.ao.style.border="1px dashed red";

Drag.tdiv.style.display="block";

Drag.tdiv.style.position="absolute";

Drag.tdiv.style.filter="alpha(opacity=70)";

Drag.tdiv.style.cursor="move";

Drag.tdiv.style.border="1px solid #000000";

Drag.tdiv.style.width=Drag.ao.offsetWidth;

Drag.tdiv.style.height=Drag.ao.offsetHeight;

Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;

Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;

document.body.appendChild(Drag.tdiv);

Drag.lastX=event.clientX;

Drag.lastY=event.clientY;

Drag.lastLeft=Drag.tdiv.style.left;

Drag.lastTop=Drag.tdiv.style.top;

},

draging:function(){//重要:判断MOUSE的位置

if(!Drag.dragged||Drag.ao==null)return;

var tX=event.clientX;

var tY=event.clientY;

Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;

Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;

for(var i=0;i<parentTable.cells.length;i++){

var parentCell=Drag.getInfo(parentTable.cells[i]);

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

var subTables=parentTable.cells[i].getElementsByTagName("table");

if(subTables.length==0){

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

parentTable.cells[i].appendChild(Drag.ao);

}

break;

}

for(var j=0;j<subTables.length;j++){

var subTable=Drag.getInfo(subTables[j]);

if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){

parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);

break;

}else{

parentTable.cells[i].appendChild(Drag.ao);

}

}

}

}

}

,

dragEnd:function(){

if(!Drag.dragged)return;

Drag.dragged=false;

Drag.mm=Drag.repos(150,15);

Drag.ao.style.borderWidth="0px";

Drag.ao.style.borderTop="1px solid #3366cc";

Drag.tdiv.style.borderWidth="0px";

Drag.ao.style.zIndex=1;

},

getInfo:function(o){//取得坐标

var to=new Object();

to.left=to.right=to.top=to.bottom=0;

var twidth=o.offsetWidth;

var theight=o.offsetHeight;

while(o!=document.body){

to.left+=o.offsetLeft;

to.top+=o.offsetTop;

o=o.offsetParent;

}

to.right=to.left+twidth;

to.bottom=to.top+theight;

return to;

},

repos:function(aa,ab){

var f=Drag.tdiv.filters.alpha.opacity;

var tl=parseInt(Drag.getInfo(Drag.tdiv).left);

var tt=parseInt(Drag.getInfo(Drag.tdiv).top);

var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;

var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;

var kf=f/ab;

return setInterval(function(){if(ab<1){

clearInterval(Drag.mm);

Drag.tdiv.removeNode(true);

Drag.ao=null;

return;

}

ab--;

tl-=kl;

tt-=kt;

f-=kf;

Drag.tdiv.style.left=parseInt(tl)+"px";

Drag.tdiv.style.top=parseInt(tt)+"px";

Drag.tdiv.filters.alpha.opacity=f;

}

,aa/ab)

},

inint:function(){//初始化

for(var i=0;i<parentTable.cells.length;i++){

var subTables=parentTable.cells[i].getElementsByTagName("table");

for(var j=0;j<subTables.length;j++){

if(subTables[j].className!="dragTable")break;

subTables[j].rows[0].className="dragTR";

subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);

}

}

document.onmousemove=Drag.draging;

document.onmouseup=Drag.dragEnd;

}

//end of Object Drag

}

Drag.inint();

function _show(str){

var w=window.open('','');

var d=w.document;

d.open();

str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");

str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");

str=str.replace(/\r/g,"<br />\n");

d.write(str);

} function getBodyContent(){ alert(document.getElementById("contentBody").innerHTML); }
</script>

 

 HTML代码

<div id ="contentBody"> <table border="0" cellpadding="0" cellspacing="10" width="100%" id="parentTable"> <colgroup>   <col width="50%"/>   <col width="25%"/>   <col width="25%"/> </colgroup>        <tr>   <td colspan="3">   <table border=0 class="dragTable" cellspacing="0">    <tr>     <td><b>这里可以做表头</b></td>    </tr>    <tr>     <td>放上一张图片</td>    <tr>   </table>   </td> </tr> <tr>   <td>   <table border=0 class="dragTable" cellspacing="0">    <tr>     <td><b>第一个栏目块标题</b></td>    </tr>    <tr>     <td>我什么也没看见</td>    <tr>   </table>   </td>   <td>   <table border=0 class="dragTable" cellspacing="0">    <tr>     <td><b>这里是第二个栏目块标题</b></td>    </tr>    <tr>     <td>我什么也没看见</td>    <tr>   </table>   </td>   <td>   <table border=0 class="dragTable" cellspacing="0">    <tr>     <td><b>不用问第三个标题</b></td>    </tr>    <tr>     <td>我什么也没看见</td>    <tr>   </table>   </td> </tr>     </table> </div> <input type="button" value="显示代码" onclick="javascript:getBodyContent()">

 

分享到:
评论

相关推荐

    网页实现任意放大、缩小、拖拽、移动drag+jquery+html.rar

    通过动态改变`scale`,我们可以实现平滑的缩放效果。同时,为了保持元素内部内容的清晰,可以使用CSS3的`transform-origin`属性来设定缩放的中心点。 3. **移动(Move)**:在元素已经可拖动的情况下,移动功能实际...

    可拖拽的html5人物关系图代码

    此“可拖拽的html5人物关系图代码”项目旨在实现一种交互式的、用户可以自由调整的人物关系展示方式,这对于数据可视化和信息管理非常有用。在这个项目中,我们将深入探讨HTML5的核心特性,特别是与图形和交互性相关...

    一个觉得不错的图片拖拽网页特效

    在您提到的资源中,“一个觉得不错的图片拖拽网页特效”很可能是一个实现图片拖放功能的示例代码或库,可能是为了帮助开发者创建更生动、互动的网页。 拖拽功能的实现涉及到HTML、CSS和JavaScript的综合运用。HTML...

    HTML5+WebGL实现可拖拽的3D透明杯子效果源码.zip

    这个"HTML5+WebGL实现可拖拽的3D透明杯子效果源码.zip"文件,显然包含了一个使用这两种技术制作的互动3D模型示例,特别是一个可以被用户拖动的透明3D杯子。 首先,我们需要了解HTML5中的拖放(Drag and Drop)API。...

    HTML5带左右箭头可拖动幻灯片代码.zip

    "HTML5带左右箭头可拖动幻灯片代码"是一个利用HTML5、CSS3以及JavaScript(通常通过jQuery库)构建的网页组件,用于实现一个功能丰富的幻灯片展示效果。这个组件包含左右箭头,用户可以通过点击这些箭头来切换幻灯片...

    html5鼠标拖拽填充网页小游戏代码

    在这个“HTML5鼠标拖拽填充网页小游戏”中,利用HTML5的核心特性,我们可以实现一个趣味盎然的用户交互体验。 首先,HTML5中的`&lt;draggable&gt;`属性是实现鼠标拖拽的关键。这个属性可以添加到任何HTML元素上,如图片或...

    可移动的网页布局,网页模块之间可随意拖动

    在这个"可移动的网页布局"项目中,我们关注的是如何实现网页模块之间的自由拖动功能,让用户可以根据自己的喜好调整页面元素的位置,从而提供更加个性化的浏览体验。 在网页设计中,布局通常分为固定布局、流式布局...

    HTML5网页底部音乐播放器代码.zip

    CSS3的`position: fixed`属性可以实现这一效果,让播放器在滚动页面时始终保持在视口的底部。同时,可能还利用了CSS3的过渡效果和动画,为播放和暂停按钮添加动态效果,提升视觉吸引力。 压缩包中的"说明.htm"可能...

    HTML5可拖拽切换全屏幻灯片代码

    在这个“HTML5可拖拽切换全屏幻灯片代码”项目中,我们看到了HTML5技术在创建现代网页体验上的应用,特别是通过拖拽操作实现全屏幻灯片的平滑切换。 首先,我们要理解HTML5中的拖放(Drag and Drop)功能。这个特性...

    jQuery实现图片上传拖拽排序代码.zip

    在本项目中,"jQuery实现图片上传拖拽排序代码.zip" 是一个包含使用jQuery库来实现图片上传和拖拽排序功能的源代码压缩包。这个功能常见于许多现代网页应用,尤其是那些需要用户自定义顺序或者展示内容的应用,如...

    html5鼠标拖拽填充游戏代码.zip

    HTML5的鼠标拖拽填充游戏代码是一个利用现代Web技术实现的互动游戏,它结合了HTML、CSS和JavaScript(特别是jQuery库)来创建一个引人入胜的用户体验。在这个压缩包中,`jiaoben7046`可能是源代码文件或者一个示例...

    基于jquery+canvas实现的拖动插件

    jQuery的核心特性可以使得网页动态化和交互变得简单。本项目以"基于jquery+canvas实现的拖动插件"为主题,利用jQuery与HTML5的Canvas API,创建了一个允许用户点击并拖动图形的功能。 Canvas是HTML5引入的一个强大...

    html+css+js实现的8款图片展示设计,可用于制作网页版相册

    2. **滑动轮播**:JavaScript可以实现图片的自动滑动,通常使用定时器控制轮播速度,配合CSS实现过渡动画,使得图片在切换时平滑过渡。jQuery库中的`.carousel()`函数是一个常见的实现方法。 3. **灯箱效果**:当...

    html5全屏横向时间轴滑块代码

    HTML5全屏横向时间轴滑块是一种常见的网页设计元素,常用于展示项目进度、历史事件或故事线。这种设计能够以直观、动态的方式呈现信息,提高用户体验。在本主题中,我们将深入探讨如何利用HTML5的特性来创建这样一个...

    JS鼠标拖动翻页切换代码.zip

    在本资源"JS鼠标拖动翻页切换代码.zip"中,包含的是一种实现网页内容翻页功能的技术,它允许用户通过鼠标拖动来浏览页面,提高了交互性和用户体验。这种技术尤其适用于数据展示密集型的应用,如表格、报告或者长列表...

    网页版天天消消乐HTML5源码

    【描述】中的“网页版天天消消乐”是一款流行的游戏,通过HTML5实现后,可以在不同的浏览器上运行,无需额外插件,用户只需打开网页就能进行游戏,提高了用户体验和游戏的普及性。 【标签】"html5 html 前端"代表了...

    左右拖拽翻页代码

    左右拖拽翻页是一种独特的网页或应用界面设计技术,它为用户提供了一种新颖的浏览方式,使得用户可以通过在页面左右两侧拖动来实现前后翻页。这种交互方式常见于一些移动设备的应用,如电子阅读器、图片浏览器或者...

    一个导航网站源代码,html格式

    通过研究这个源代码,你可以学习到如何创建一个基本的导航网站,理解网页设计的基本原理,为今后的网页开发打下坚实的基础。同时,它也是一个很好的实践平台,可以动手修改内容,根据自己的需求定制个性化导航网站。

    网页拖拽效果

    网页拖拽效果是一种常见的交互设计技术,它使得用户可以通过鼠标或其他输入设备,将网页上的元素在页面上自由移动,类似于Google iGoogle个性化主页中的小工具布局功能。这种效果提升了用户体验,让用户可以按照自己...

    使用网页设计实现描写家乡的网页

    1. **Dreamweaver简介**:Adobe Dreamweaver是一款强大的集成开发环境(IDE),专为构建高质量的网页和Web应用程序而设计。它提供了可视化的编辑界面,允许用户通过拖放功能来布局页面,同时支持HTML、CSS和...

Global site tag (gtag.js) - Google Analytics