JavaScript模块随意拖动示例代码
发布时间：2024-07-13 13:06:31
标签：拖动
<!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>
0
投稿猜你喜欢
- 之前用python调用API存JSON的时候试用了很多方法，现在调用API直接获取参数的时候也是查了好多例子（毕竟我是一个初学者）。结果让我
- 在实现鼠标停在某元素上，会出现提示信息，以前我们太多是采用javascript脚本代码来实现。看了怿飞的IE中伪类:hover的使用及BUG
1.if判断1.1 if语句if 表达式:语句1语句2……1.“if&- 本文实例讲述了Python Web编程之WSGI协议。分享给大家供大家参考，具体如下：WSGI简介Web框架和Wen服务器之间需要进行通信，
- 为什么要页面静态化？1.动态文件执行过程:语法分析-编译-运行2.静态文件，不需要编译，减少了服务器脚本运行的时间，降低了服务器的响应时间，
- 图像融合按照一定的比例将两张图片融合在一起addWeighted()方法：参数1第一张图片矩阵参数2第一张图片矩阵的权重参数3第二张图片矩阵
- 系统管理员通常从svn/git中检索代码，部署站点后通常首先会生成该站点所有文件的MD5值，如果上线后网站页面内容被篡改（如挂马）等，可以比
- 本文以实例形式展示了Python获取电脑硬件信息及状态的实现方法，是Python程序设计中很有实用价值的技巧。分享给大家供大家参考之用。具体
- PNG格式以支持透明和无损，且相对大小适中，已成为现在网页中图片运用的主流。有些时候我们在制作网页时使用PNG格式图片，用IE浏览器查看却无
- 目的临床数据的记录时间和对应标签（逗号后面的数字）记录在txt文件里，要把标签转换为3类标签，并且计算出每个标签的分别持续时间，然后绘制成柱
- 在项目过程中，需要设置各种IP和端口号信息等，如果每次都在源程序中更改会很麻烦(因为每次都要重启项目重新加载配置信息)，因此将需要修改的参数
- 调度和锁定在很多客户一起查询数据表时，如果使客户能最快地查询到数据就是调度和锁定做的工作了。在MySQL中，我们把select操作叫做读，把
- 最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,上网查了一下,发现已经有不少类似的菜单效果,不管那么多,先
- 直接上例子。import pandas as pd df = pd.DataFrame({'class':['a&#
- 本文实例讲述了Python自定义函数计算给定日期是该年第几天的方法。分享给大家供大家参考，具体如下：写一个函数，计算给定日期是该年的第几天．
- 一般开发,SQL Server的数据库所有者为dbo.但是为了安全,有时候可能把它换成其它的名称，所有者变换不是很方便.这里列出两种供参考
- 本文为大家分享了如何用Navicat把csv数据导入mysql，供大家参考，具体内容如下1.获取csv数据，用office另存为功能把exc
- 1、简介Burp Suite是用于攻击web应用程序的集成平台。它包含了许多工具，并为这些工具设计了许多接口，以促进加快攻击应用程序的过程。
- 已经获取微信公众号发布的图片，但不能正常显示 ，提示：此图片来自微信公众平台 未经允许不得引用。 这是怎么回事呢？遇到这
- 本周暂时比较清闲，可以保持每日一更的速度。国外身份证项目新增需求，检测出身份证正面的人脸。最开始考虑mobilenet-ssd，经同事提醒，
