这篇文章主要介绍了JavaScript模块随意拖动的具体实现,需要的朋友可以参考下
 
<!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>
最新资讯
SpaceX首张船票已出 日(J)本(P)富豪成史上首个私人月球游客

SpaceX首张船票已出

去找嫦娥的竟然是一位日(J)本(P)人。
苹果Safari浏览器出漏洞:可能导致iOS/macOS崩溃重启

苹果Safari浏览器出漏

利用WebKit这一漏洞,攻击者可以让设备加载植入特定CSS
没有人的朋友圈

没有人的朋友圈

微信诞生7年,一方面我们努力的增加微信好友,努力给朋友
朋友圈力推微视,“头腾”大战仍在延续

朋友圈力推微视,“头腾

头腾大战延续?
这届iPhone若大卖,苹果来年还能再涨一波?

这届iPhone若大卖,苹果

越贵越买将给予苹果更为膨胀的心态,那么iPhone的价格走
最新文章
详解NodeJs开发微信公众号

详解NodeJs开发微信公

本篇文章给大家分享了NodeJs开发微信公众号的相关技术
详解webpack4多入口、多页面项目构建案例

详解webpack4多入口、

这篇文章主要介绍了详解webpack4多入口、多页面项目构
Vue仿支付宝支付功能

Vue仿支付宝支付功能

这篇文章主要介绍了Vue仿支付宝支付功能,非常不错,具有
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】

jquery ajaxfileuplod

点击一次上传, 当上传操作结束后才能操作界面,实现方式
JavaScript继承与多继承实例分析

JavaScript继承与多继

这篇文章主要介绍了JavaScript继承与多继承,结合实例
使用javascript做在线算法编程

使用javascript做在线

这篇文章主要介绍了使用javascript做在线算法编程的相