首页
所有分类
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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
Javascript入门学习资料收集整理篇
Jul 06 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
vue中锚点的三种方法
Jul 06 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
js中switch语句的学习笔记
Mar 25 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) SONY(15) PL-880(1) TOSHIBA(1) ICF-7600(1) 索尼(5) 德劲(5) 手调机(1) 东芝(1) RP-F11(1)
You might like
php中常用编辑器推荐
2007/01/02 PHP
php广告加载类用法实例
2014/09/23 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
python网络编程学习笔记(10)：webpy框架
2014/06/09 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
python 将日期戳（五位数时间）转换为标准时间
2019/07/11 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
加拿大最大的钻石商店：Peoples Jewellers
2018/01/01 全球购物
MATCHESFASHION.COM法国官网：英国奢侈品零售商
2018/01/04 全球购物
给儿子的表扬信
2014/01/15 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python