Le module JavaScript fait glisser un exemple de code vers les compétences will

Copier le code Le code est le suivant : JavaScript模块随意拖动 html{ largeur : 100 % ; overflow-x:hidden; } body{ font-family : Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif ; largeur : 100 % ; marge :0px ; remplissage : 0px ; text-align:center; couleur de fond :#E2EBED ; taille de police : 0,7em ; overflow-x:hidden; }

#mainContainer{ width:600px; marge : 0 auto ; text-align:left; couleur de fond :#FFF ; } h4{ marge:0px; } p{ margin-top:5px; } #dragableElementsParentBox{ padding:10px; }

.smallArticle,.bigArticle{ float:left; bordure : 1px solide #000 ; couleur de fond :#DDD ; remplissage : 2 px ; marge-droite : 10px ; marge inférieure : 5px ; } .smallArticle img,.bigArticle img{ float:left; remplissage : 5px ; } .smallArticle .rightImage,.bigArticle .rightImage{ float:right; } .smallArticle{ width:274px; } .bigArticle{ width:564px; } .clear{ clear: les deux ; }

#rectangle{ float:left; bordure : 1px pointillé #F00 ; couleur de fond :#FFF ; } #insertionMarker{ width:6px; position : absolue ; affichage : aucun ; } #insertionMarker img{ float:left; } #dragDropMoveLayer{ position:absolute; affichage : aucun ; bordure : 1px solide #000 ; filtre:alpha(opacité=50); opacité :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; }

alerte(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; retourne vrai ; }

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], n° 1); } } } if(x>ref['left'] && y>(ref['top'] ref['height']))return 'append'; retour faux ; }

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

fonction autoScroll(direction,yPos) { if(document.documentElement.scrollHeight>documentScrollHeight && direction>0)return; window.scrollBy(0,direction); if(direction 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 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 ='aucun'; 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.

Le module JavaScript fait glisser un exemple de code vers les compétences will_javascript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 7

Heading 8

Heading 9