首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript模块随意拖动示例代码

Posted in Javascript onMay 27, 2014 
<!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>JavaScript模块随意拖动</title> 
<style type="text/css"> 
html{ 
width:100%; 
overflow-x:hidden; 
} 
body{ 
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; 
width:100%; 
margin:0px; 
padding:0px; 
text-align:center; 
background-color:#E2EBED; 
font-size:0.7em; 
overflow-x:hidden; 
} #mainContainer{ 
width:600px; 
margin:0 auto; 
text-align:left; 
background-color:#FFF; 
} 
h4{ 
margin:0px; 
} 
p{ 
margin-top:5px; 
} 
#dragableElementsParentBox{ 
padding:10px; 
} 
.smallArticle,.bigArticle{ 
float:left; 
border:1px solid #000; 
background-color:#DDD; 
padding:2px; 
margin-right:10px; 
margin-bottom:5px; 
} 
.smallArticle img,.bigArticle img{ 
float:left; 
padding:5px; 
} 
.smallArticle .rightImage,.bigArticle .rightImage{ 
float:right; 
} 
.smallArticle{ 
width:274px; 
} 
.bigArticle{ 
width:564px; 
} 
.clear{ 
clear:both; 
} 
#rectangle{ 
float:left; 
border:1px dotted #F00; 
background-color:#FFF; 
} 
#insertionMarker{ 
width:6px; 
position:absolute; 
display:none; 
} 
#insertionMarker img{ 
float:left; 
} 
#dragDropMoveLayer{ 
position:absolute; 
display:none; 
border:1px solid #000; 
filter:alpha(opacity=50); 
opacity:0.5; 
} 
</style> 
<script type="text/javascript"> 
var rectangleBorderWidth = 2; 
var useRectangle = false; 
var autoScrollSpeed = 4; 
function saveData() 
{ 
var saveString = ""; 
for(var no=0;no<dragableObjectArray.length;no++){ 
if(saveString.length>0)saveString = saveString + ';'; 
ref = dragableObjectArray[no]; 
saveString = saveString + ref['obj'].id; 
} 
alert(saveString); 
} 
var dragableElementsParentBox; 
var opera = navigator.appVersion.indexOf('Opera')>=0?true:false; 
var rectangleDiv = false; 
var insertionMarkerDiv = false; 
var mouse_x; 
var mouse_y; 
var el_x; 
var el_y; 
var dragDropTimer = -1; 
var dragObject = false; 
var dragObjectNextObj = false; 
var dragableObjectArray = new Array(); 
var destinationObj = false; 
var currentDest = false; 
var allowRectangleMove = true; 
var insertionMarkerLine; 
var dragDropMoveLayer; 
var autoScrollActive = false; 
var documentHeight = false; 
var documentScrollHeight = false; 
var dragableAreaWidth = false; 
function getTopPos(inputObj) 
{ 
var returnValue = inputObj.offsetTop; 
while((inputObj = inputObj.offsetParent) != null){ 
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop; 
} 
return returnValue; 
} 
function getLeftPos(inputObj) 
{ 
var returnValue = inputObj.offsetLeft; 
while((inputObj = inputObj.offsetParent) != null){ 
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft; 
} 
return returnValue; 
} 
function cancelSelectionEvent() 
{ 
if(dragDropTimer>=0)return false; 
return true; 
} 
function getObjectFromPosition(x,y) 
{ 
var height = dragObject.offsetHeight; 
var width = dragObject.offsetWidth; 
var indexCurrentDragObject=-5; 
for(var no=0;no<dragableObjectArray.length;no++){ 
ref = dragableObjectArray[no]; 
if(ref['obj']==dragObject)indexCurrentDragObject=no; 
if(no<dragableObjectArray.length-1 && dragableObjectArray[no+1]['obj']==dragObject)indexCurrentDragObject=no+1; 
if(ref['obj']==dragObject && useRectangle)continue; 
if(x > ref['left'] && y>ref['top'] && x<(ref['left'] + (ref['width']/2)) && y<(ref['top'] + ref['height'])){ 
if(!useRectangle && dragableObjectArray[no]['obj']==dragObject)return 'self'; 
if(indexCurrentDragObject==(no-1))return 'self'; 
return Array(dragableObjectArray[no],no); 
} 
if(x > (ref['left'] + (ref['width']/2)) && y>ref['top'] && x<(ref['left'] + ref['width']) && y<(ref['top'] + ref['height'])){ 
if(no<dragableObjectArray.length-1){ 
if(no==indexCurrentDragObject || (no==indexCurrentDragObject-1)){ 
return 'self'; 
} 
if(dragableObjectArray[no]['obj']!=dragObject){ 
return Array(dragableObjectArray[no+1],no+1); 
}else{ 
if(!useRectangle)return 'self'; 
if(no<dragableObjectArray.length-2)return Array(dragableObjectArray[no+2],no+2); 
} 
}else{ 
if(dragableObjectArray[dragableObjectArray.length-1]['obj']!=dragObject)return 'append'; 
} 
} 
if(no<dragableObjectArray.length-1){ 
if(x > (ref['left'] + ref['width']) && y>ref['top'] && y<(ref['top'] + ref['height']) && y<dragableObjectArray[no+1]['top']){ 
return Array(dragableObjectArray[no+1],no+1); 
} 
} 
} 
if(x>ref['left'] && y>(ref['top'] + ref['height']))return 'append'; 
return false; 
} 
function initDrag(e) 
{ 
if(document.all)e = event; 
mouse_x = e.clientX; 
mouse_y = e.clientY; 
if(!documentScrollHeight)documentScrollHeight = document.documentElement.scrollHeight + 100; 
el_x = getLeftPos(this)/1; 
el_y = getTopPos(this)/1; 
dragObject = this; 
if(useRectangle){ 
rectangleDiv.style.width = this.clientWidth - (rectangleBorderWidth*2) +'px'; 
rectangleDiv.style.height = this.clientHeight - (rectangleBorderWidth*2) +'px'; 
rectangleDiv.className = this.className; 
}else{ 
insertionMarkerLine.style.width = '6px'; 
} 
dragDropTimer = 0; 
dragObjectNextObj = false; 
if(this.nextSibling){ 
dragObjectNextObj = this.nextSibling; 
if(!dragObjectNextObj.tagName)dragObjectNextObj = dragObjectNextObj.nextSibling; 
} 
initDragTimer(); 
return false; 
} 
function initDragTimer() 
{ 
if(dragDropTimer>=0 && dragDropTimer<10){ 
dragDropTimer++; 
setTimeout('initDragTimer()',5); 
return; 
} 
if(dragDropTimer==10){ 
if(useRectangle){ 
dragObject.style.opacity = 0.5; 
dragObject.style.filter = 'alpha(opacity=50)'; 
dragObject.style.cursor = 'default'; 
}else{ 
var newObject = dragObject.cloneNode(true); 
dragDropMoveLayer.appendChild(newObject); 
} 
} 
} 
function autoScroll(direction,yPos) 
{ 
if(document.documentElement.scrollHeight>documentScrollHeight && direction>0)return; 
window.scrollBy(0,direction); 
if(direction<0){ 
if(document.documentElement.scrollTop>0){ 
mouse_y = mouse_y - direction; 
if(useRectangle){ 
dragObject.style.top = (el_y - mouse_y + yPos) + 'px'; 
}else{ 
dragDropMoveLayer.style.top = (el_y - mouse_y + yPos) + 'px'; 
} 
}else{ 
autoScrollActive = false; 
} 
}else{ 
if(yPos>(documentHeight-50)){ 
mouse_y = mouse_y - direction; 
if(useRectangle){ 
dragObject.style.top = (el_y - mouse_y + yPos) + 'px'; 
}else{ 
dragDropMoveLayer.style.top = (el_y - mouse_y + yPos) + 'px'; 
} 
}else{ 
autoScrollActive = false; 
} 
} 
if(autoScrollActive)setTimeout('autoScroll('+direction+',' + yPos + ')',5); 
} 
function moveDragableElement(e) 
{ 
if(document.all)e = event; 
if(dragDropTimer<10)return; 
if(!allowRectangleMove)return false; 

if(e.clientY<50 || e.clientY>(documentHeight-50)){ 
if(e.clientY<50 && !autoScrollActive){ 
autoScrollActive = true; 
autoScroll((autoScrollSpeed*-1),e.clientY); 
} 
if(e.clientY>(documentHeight-50) && document.documentElement.scrollHeight<=documentScrollHeight && !autoScrollActive){ 
autoScrollActive = true; 
autoScroll(autoScrollSpeed,e.clientY); 
} 
}else{ 
autoScrollActive = false; 
} 
if(useRectangle){ 
if(dragObject.style.position!='absolute'){ 
dragObject.style.position = 'absolute'; 
setTimeout('repositionDragObjectArray()',50); 
} 
} 
if(useRectangle){ 
rectangleDiv.style.display='block'; 
}else{ 
insertionMarkerDiv.style.display='block'; 
dragDropMoveLayer.style.display='block'; 
} 
if(useRectangle){ 
dragObject.style.left = (el_x - mouse_x + e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)) + 'px'; 
dragObject.style.top = (el_y - mouse_y + e.clientY) + 'px'; 
}else{ 
dragDropMoveLayer.style.left = (el_x - mouse_x + e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)) + 'px'; 
dragDropMoveLayer.style.top = (el_y - mouse_y + e.clientY) + 'px'; 
} 
dest = getObjectFromPosition(e.clientX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft),e.clientY+Math.max(document.body.scrollTop,document.documentElement.scrollTop)); 
if(dest!==false && dest!='append' && dest!='self'){ 
destinationObj = dest[0]; 
if(currentDest!==destinationObj){ 
currentDest = destinationObj; 
if(useRectangle){ 
destinationObj['obj'].parentNode.insertBefore(rectangleDiv,destinationObj['obj']); 
repositionDragObjectArray(); 
}else{ 
if(dest[1]>0 && (dragableObjectArray[dest[1]-1]['obj'].offsetLeft + dragableObjectArray[dest[1]-1]['width'] + dragObject.offsetWidth) < dragableAreaWidth){ 
insertionMarkerDiv.style.left = (getLeftPos(dragableObjectArray[dest[1]-1]['obj']) + dragableObjectArray[dest[1]-1]['width'] + 2) + 'px'; 
insertionMarkerDiv.style.top = (getTopPos(dragableObjectArray[dest[1]-1]['obj']) - 2) + 'px'; 
insertionMarkerLine.style.height = dragableObjectArray[dest[1]-1]['height'] + 'px'; 
}else{ 
insertionMarkerDiv.style.left = (getLeftPos(destinationObj['obj']) - 8) + 'px'; 
insertionMarkerDiv.style.top = (getTopPos(destinationObj['obj']) - 2) + 'px'; 
insertionMarkerLine.style.height = destinationObj['height'] + 'px'; 
} 

} 
} 
} 
if(dest=='self' || !dest){ 
insertionMarkerDiv.style.display='none'; 
destinationObj = dest; 
} 
if(dest=='append'){ 
if(useRectangle){ 
dragableElementsParentBox.appendChild(rectangleDiv); 
dragableElementsParentBox.appendChild(document.getElementById('clear')); 
}else{ 
var tmpRef = dragableObjectArray[dragableObjectArray.length-1]; 
insertionMarkerDiv.style.left = (getLeftPos(tmpRef['obj']) + 2) + tmpRef['width'] + 'px'; 
insertionMarkerDiv.style.top = (getTopPos(tmpRef['obj']) - 2) + 'px'; 
insertionMarkerLine.style.height = tmpRef['height'] + 'px'; 
} 
destinationObj = dest; 
repositionDragObjectArray(); 
} 
if(useRectangle && !dest){ 
destinationObj = currentDest; 
} 
allowRectangleMove = false; 
setTimeout('allowRectangleMove=true',50); 
} 
function stop_dragDropElement() 
{ 
dragDropTimer = -1; 
if(destinationObj && destinationObj!='append' && destinationObj!='self'){ 
destinationObj['obj'].parentNode.insertBefore(dragObject,destinationObj['obj']); 
} 
if(destinationObj=='append'){ 
dragableElementsParentBox.appendChild(dragObject); 
dragableElementsParentBox.appendChild(document.getElementById('clear')); 
} 
if(dragObject && useRectangle){ 
dragObject.style.opacity = 1; 
dragObject.style.filter = 'alpha(opacity=100)'; 
dragObject.style.cursor = 'move'; 
dragObject.style.position='static'; 
} 
rectangleDiv.style.display='none'; 
insertionMarkerDiv.style.display='none'; 
dragObject = false; 
currentDest = false; 
resetObjectArray(); 
destinationObj = false; 
if(dragDropMoveLayer){ 
dragDropMoveLayer.style.display='none'; 
dragDropMoveLayer.innerHTML=''; 
} 
autoScrollActive = false; 
documentScrollHeight = document.documentElement.scrollHeight + 100; 
} 
function cancelEvent() 
{ 
return false; 
} 
function repositionDragObjectArray() 
{ 
for(var no=0;no<dragableObjectArray.length;no++){ 
ref = dragableObjectArray[no]; 
ref['left'] = getLeftPos(ref['obj']); 
ref['top'] = getTopPos(ref['obj']); 
} 
documentScrollHeight = document.documentElement.scrollHeight + 100; 
documentHeight = document.documentElement.clientHeight; 
} 
function resetObjectArray() 
{ 
dragableObjectArray.length=0; 
var subDivs = dragableElementsParentBox.getElementsByTagName('*'); 
var countEl = 0; 
for(var no=0;no<subDivs.length;no++){ 
var attr = subDivs[no].getAttribute('dragableBox'); 
if(opera)attr = subDivs[no].dragableBox; 
if(attr=='true'){ 
var index = dragableObjectArray.length; 
dragableObjectArray[index] = new Array(); 
ref = dragableObjectArray[index]; 
ref['obj'] = subDivs[no]; 
ref['width'] = subDivs[no].offsetWidth; 
ref['height'] = subDivs[no].offsetHeight; 
ref['left'] = getLeftPos(subDivs[no]); 
ref['top'] = getTopPos(subDivs[no]); 
ref['index'] = countEl; 
countEl++; 
} 
} 
} 
function initdragableElements() 
{ 
dragableElementsParentBox = document.getElementById('dragableElementsParentBox'); 
insertionMarkerDiv = document.getElementById('insertionMarker'); 
insertionMarkerLine = document.getElementById('insertionMarkerLine'); 
dragableAreaWidth = dragableElementsParentBox.offsetWidth; 
if(!useRectangle){ 
dragDropMoveLayer = document.createElement('DIV'); 
dragDropMoveLayer.id = 'dragDropMoveLayer'; 
document.body.appendChild(dragDropMoveLayer); 
} 
var subDivs = dragableElementsParentBox.getElementsByTagName('*'); 
var countEl = 0; 
for(var no=0;no<subDivs.length;no++){ 
var attr = subDivs[no].getAttribute('dragableBox'); 
if(opera)attr = subDivs[no].dragableBox; 
if(attr=='true'){ 
subDivs[no].style.cursor='move'; 
subDivs[no].onmousedown = initDrag; 
var index = dragableObjectArray.length; 
dragableObjectArray[index] = new Array(); 
ref = dragableObjectArray[index]; 
ref['obj'] = subDivs[no]; 
ref['width'] = subDivs[no].offsetWidth; 
ref['height'] = subDivs[no].offsetHeight; 
ref['left'] = getLeftPos(subDivs[no]); 
ref['top'] = getTopPos(subDivs[no]); 
ref['index'] = countEl; 
countEl++; 
} 
} 
rectangleDiv = document.createElement('DIV'); 
rectangleDiv.id='rectangle'; 
rectangleDiv.style.display='none'; 
dragableElementsParentBox.appendChild(rectangleDiv); 
document.body.onmousemove = moveDragableElement; 
document.body.onmouseup = stop_dragDropElement; 
document.body.onselectstart = cancelSelectionEvent; 
document.body.ondragstart = cancelEvent; 
window.onresize = repositionDragObjectArray; 
documentHeight = document.documentElement.clientHeight; 
} 
window.onload = initdragableElements; 
</script> 
<div id="mainContainer"> 
<!-- START DRAGABLE CONTENT --> 
<div id="dragableElementsParentBox"> 
<div class="bigArticle" dragableBox="true" id="article1"> 
<h4>Heading 1</h4> 
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea?ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p> 
</div> 
<div class="smallArticle" dragableBox="true" id="article2"> 
<h4>Heading 2</h4> 
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p> 
</div> 
<div class="smallArticle" dragableBox="true" id="article3"> 
<h4>Heading 3</h4> 
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p> 
</div> 
<div class="bigArticle" dragableBox="true" id="article4"> 
<h4>Heading 4</h4> 
<p> Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea?ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p> 
</div> 
<div class="smallArticle" dragableBox="true" id="article5"> 
<h4>Heading 5</h4> 
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p> 
</div> 
<div class="smallArticle" dragableBox="true" id="article6"> 
<h4>Heading 6</h4> 
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p> 
</div> 
<div class="bigArticle" dragableBox="true" id="article7"> 
<h4>Heading 7</h4> 
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea?ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p> 
</div> 
<div class="bigArticle" dragableBox="true" id="article8"> 
<h4>Heading 8</h4> 
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea?ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p> 
</div> 
<div class="bigArticle" dragableBox="true" id="article9"> 
<h4>Heading 9</h4> 
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea?ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p> 
</div> 
<div class="clear" id="clear"></div> 
</div> 
<!-- END DRAGABLE CONTENT --> 
<input type="button" value="Save" onclick="saveData()"> 
</div> 
<!-- REQUIRED DIVS --> 
<div id="insertionMarker"> 
<img src="/jscss/demoimg/200906/marker_top.gif"> 
<img src="/jscss/demoimg/200906/marker_middle.gif" id="insertionMarkerLine"> 
<img src="/jscss/demoimg/200906/marker_bottom.gif"> 
</div> 
<!-- END REQUIRED DIVS --> 
</head> 
<body> 
</body> 
</html>

JavaScript模块随意拖动示例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
JavaScript控制台的更多功能
Apr 28 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 #Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 #Javascript
纯js实现遮罩层效果原理分析
May 27 #Javascript
使用jquery animate创建平滑滚动效果（可以是到顶部、到底部或指定地方）
May 27 #Javascript
JQuery获取表格数据示例代码
May 26 #Javascript
chrome下img加载对height()的影响示例探讨
May 26 #Javascript
chrome下jq width()方法取值为0的解决方法
May 26 #Javascript
脚手架(2) 子查询(1) Next.js(1) 日志格式分析(1) TableField(1) Mybatis-Plus(3) el-table(1) create(1) nginx(76) mounted(1)
You might like
雄兵连：第三季确定会出，不过时间未定，鹤熙是第三季的主角！
2020/03/13 国漫
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
php批量删除操作（数据访问）
2017/05/23 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
axios基本入门用法教程
2017/03/25 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
jQuery实现增删改查
2020/12/22 jQuery
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
JD Sports德国官网：英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
实习评语
2013/12/16 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
机械机修工岗位职责
2014/08/03 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
德劲DE1105机评
2022/04/05 无线电