首页
所有分类
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的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
node.js超时timeout详解
Nov 26 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
create-react-app中添加less支持的实现
Nov 15 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
索引树扫描(1) geoserver(1) ref(1) lua(3) 绝对定位(1) 全表扫描(1) postcss-px2rem(1) 相对定位(1) sql模式(1) 匹配(1)
You might like
PHP 开源框架22个简单简介
2009/08/24 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
模仿jQuery each函数的链式调用
2009/07/22 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
JavaScript WeakMap使用详解
2021/02/05 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python中的id()函数指的什么
2017/10/17 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python合并同类型excel表格的方法
2018/04/01 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
详解python 爬取12306验证码
2019/05/10 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
用Python制作音乐海报
2021/01/26 Python
临床医学系毕业生推荐信
2013/11/09 职场文书
物流管理专业应届生求职信
2013/11/21 职场文书
文艺晚会策划方案
2014/06/11 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
教师先进个人材料
2014/12/17 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python