首页
所有分类
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升级新版本后选择器的语法问题
Jun 02 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
js中文逗号转英文实现
Feb 11 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
在Webpack中用url-loader处理图片和字体的问题
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
Apache(17) capture(1) element-china-area-data(1) SpringBoot(22) uniapp(4) Navigator(1) Flutter(2) self(1) tabBar(1) 数据重复(1)
You might like
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python中的pprint折腾记
2015/01/21 Python
python实现折半查找和归并排序算法
2017/04/14 Python
python实现随机梯度下降（SGD）
2020/03/24 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
python使用turtle库绘制树
2018/06/25 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
Linux常见面试题
2013/03/18 面试题
英文版网络工程师求职信
2013/10/28 职场文书
教师实习自我鉴定
2013/12/18 职场文书
园林资料员岗位职责
2013/12/30 职场文书
讲解员培训方案
2014/05/04 职场文书
体育比赛口号
2014/06/09 职场文书
终止劳动合同协议书
2014/10/05 职场文书
2014年质量工作总结
2014/11/22 职场文书
领导干部学习心得体会
2016/01/23 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python