JavaScript module drag sample code at will_javascript skills-JS Tutorial-php.cn

Copy code The code is as follows: JavaScript模块随意拖动 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; }

var rectangleBorderWidth = 2; var useRectangle = false; var autoScrollSpeed = 4; function saveData() { var saveString = ""; for(var no=0;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 ref = dragableObjectArray[no]; if(ref['obj']==dragObject)indexCurrentDragObject=no; if(no if(ref['obj']==dragObject && useRectangle)continue; if(x > ref['left'] && y>ref['top'] && x 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 if(no 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 } }else{ if(dragableObjectArray[dragableObjectArray.length-1]['obj']!=dragObject)return 'append';

} } if(no if(x > (ref['left'] ref['width']) && y>ref['top'] && y return Array(dragableObjectArray[no 1],no 1); } } } if(x>ref['left'] && y>(ref['top'] ref['height']))return 'append'; return false; }

function initDragTimer() { if(dragDropTimer>=0 && dragDropTimer 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); } } }

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 if(!allowRectangleMove)return false;

if(e.clientY (documentHeight-50)){ if(e.clientY autoScrollActive = true; autoScroll((autoScrollSpeed*-1),e.clientY); }

if(e.clientY>(documentHeight-50) && document.documentElement.scrollHeight 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) 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 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 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 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;

Heading 1 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.

Heading 2 Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.

Heading 3 Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.

Heading 4 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.

Heading 5 Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.

Heading 6 Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.

Heading 7 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.

Heading 8 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.

Heading 9 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.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

JavaScript module drag sample code at will_javascript skills

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 7

Heading 8

Heading 9