复制代码代码如下 :
<! 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">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gb2312" />
<title> javaScript 模块随意拖动 </title>
<스타일 유형 = "텍스트/CSS">
html {
너비 : 100%;
오버 플로우 -X : 숨겨진;
}
몸{
Font-Family : Trebuchet MS, Lucida Sans Unicode, Arial, Sans-Serif;
너비 : 100%;
여백 : 0px;
패딩 : 0px;
텍스트 정렬 : 센터;
배경색 :#e2ebed;
글꼴 크기 : 0.7EM;
오버 플로우 -X : 숨겨진;
}
#MainContainer {
너비 : 600px;
여백 : 0 Auto;
텍스트 정렬 : 왼쪽;
배경색 : #fff;
}
H4 {
여백 : 0px;
}
피{
마진-탑 : 5px;
}
#DragableElementsParentBox {
패딩 : 10px;
}
.smallarticle, .bigarticle {
플로트 : 왼쪽;
테두리 : 1px 고체 #000;
배경색 : #ddd;
패딩 : 2px;
마진 오른쪽 : 10px;
마진 바닥 : 5px;
}
.smallarticle img, .bigarticle img {
플로트 : 왼쪽;
패딩 : 5px;
}
.smallarticle .rightimage, .bigarticle .rightimage {
플로트 : 오른쪽;
}
.smallarticle {
너비 : 274px;
}
.Bigarticle {
너비 : 564px;
}
.분명한{
Clear : 둘 다;
}
#구형{
플로트 : 왼쪽;
테두리 : 1px 점선 #f00;
배경색 : #fff;
}
#InsertionMarker {
너비 : 6px;
위치 : 절대;
디스플레이 : 없음;
}
#InsertionMarker img {
플로트 : 왼쪽;
}
#dragdropMovelayer {
위치 : 절대;
디스플레이 : 없음;
테두리 : 1px 고체 #000;
필터 : 알파 (불투명도 = 50);
불투명도 : 0.5;
}
</스타일>
<script type = "text/javaScript">
var lectangleborderwidth = 2;
var userectangle = false;
var autoscrollspeed = 4;
함수 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;
}
경고 (savestring);
}
var dragableEmentsParentBox;
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 = 새로운 배열 ();
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;
함수 getToppos (inputoBj)
{
var returnValue = inputoBj.offsetTop;
while ((inputobj = inputobj.offsetparent)! = null) {
if (inputobj.tagname! = 'html') returnValue += inputoBj.offsetTop;
}
return returnValue;
}
함수 getleftpos (inputobj)
{
var returnValue = inputoBj.offSetLeft;
while ((inputobj = inputobj.offsetparent)! = null) {
if (inputoBj.tagName! = 'html') returnValue += inputoBj.offSetLeft;
}
return returnValue;
}
함수 cancelselectionEvent ()
{
if (dragdroptimer> = 0) false를 반환합니다.
진실을 반환하십시오.
}
함수 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) 계속;
if (x> ref [ 'left'] && y> ref [ 'top'] && x <(ref [ 'left'] + (ref [ 'width']]) && y <(ref [ 'top'] + ref [ 'height']) {
if (! userectangle && dragableObjectArray [no] [ 'obj'] == dragobject) return 'self';
if (indexCurrentDragObject == (no-1)) reture 'self';
반환 배열 (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)) {
반환 '자기';
}
if (dragableObjectArray [no] [ 'obj']! = dragobject) {
반환 배열 (DragableObjectArray [NO+1], NO+1);
}또 다른{
if (! userectangle) return 'self';
if (no <dragableObjectArray.length-2) return array (dragableObjectArray [no+2], no+2);
}
}또 다른{
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']) {
반환 배열 (DragableObjectArray [NO+1], NO+1);
}
}
}
if (x> ref [ 'left'] && y> (ref [ 'top'] + ref [ 'height'])) return 'append';
거짓을 반환합니다.
}
함수 initDrag (e)
{
if (document.all) e = 이벤트;
마우스 _x = e.clientx;
마우스 _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- (EquctangleBorderWidth*2) +'px';
rectanglediv.style.height = this.clientHeight- (EquctangleBorderWidth*2) +'px';
rectanglediv.classname = this.className;
}또 다른{
insertionmarkerline.style.width = '6px';
}
Dragdroptimer = 0;
dragobjectnextobj = false;
if (this.nextsibling) {
dragobjectnextobj = this.nextsibling;
if (! dragobjectnextobj.tagname) dragobjectnextobj = dragobjectnextobj.nextsibling;
}
initDragtimer ();
거짓을 반환합니다.
}
함수 initDragtimer ()
{
if (dragdroptimer> = 0 && dragdroptimer <10) {
Dragdroptimer ++;
settimeout ( 'initdragtimer ()', 5);
반품;
}
if (dragdroptimer == 10) {
if (userectangle) {
dragobject.style.opacity = 0.5;
dragobject.style.filter = 'alpha (불투명도 = 50)';
dragobject.style.cursor = 'default';
}또 다른{
var newobject = dragobject.clonenode (true);
DragdropMovelayer.appendChild (NewObject);
}
}
}
기능 자동 스크롤 (방향, YPO)
{
if (document.documentElement.scrollHeight> DocumentsCrollHeight && Direction> 0) 리턴;
scrollby (0, 방향);
if (Direction <0) {
if (document.documentElement.scrolltop> 0) {
Mouse_y = Mouse_y- 방향;
if (userectangle) {
dragobject.style.top = (el_y -mouse_y + ypos) + 'px';
}또 다른{
dragdropmovelayer.style.top = (el_y -mouse_y + ypos) + 'px';
}
}또 다른{
autoscrollactive = false;
}
}또 다른{
if (YPOS> (DocumentHeight-50)) {
Mouse_y = Mouse_y- 방향;
if (userectangle) {
dragobject.style.top = (el_y -mouse_y + ypos) + 'px';
}또 다른{
dragdropmovelayer.style.top = (el_y -mouse_y + ypos) + 'px';
}
}또 다른{
autoscrollactive = false;
}
}
if (autoscrollactive) settimeout ( 'autoscroll (' + direction + ',' + ypos + '), 5);
}
기능적 인 MizedRagableElement (e)
{
if (document.all) e = 이벤트;
if (dragdroptimer <10) 반환;
if (! allowRectAngleMove) 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);
}
}또 다른{
autoscrollactive = false;
}
if (userectangle) {
if (dragobject.style.position! = '절대') {
dragobject.style.position = '절대';
settimeout ( 'refitiondragobjectarray ()', 50);
}
}
if (userectangle) {
rectanglediv.style.display = '블록';
}또 다른{
InsertionMarkerDiv.style.display = '블록';
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';
}또 다른{
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']);
refitiondRagobjectArray ();
}또 다른{
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] [ '높이'] + 'px';
}또 다른{
insertionMarkerDiv.style.left = (getLeftpos (대상 OBJ [ 'obj']) -8) + 'px';
insertionMarkerDiv.style.top = (getToppos (대상 OBJ [ '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'));
}또 다른{
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;
refitiondRagobjectArray ();
}
if (userectangle &&! dest) {
DestinationOBJ = CurrentDest;
}
AllowRectAngleMove = false;
settimeout ( 'allowrectanglemove = true', 50);
}
함수 stop_dragdropelement ()
{
Dragdroptimer = -1;
if (destinationObj && destinationObj! = 'Append'&& destinationobj! = 'self') {
destinationobj [ 'obj']. parentnode.insertbefore (dragobject, destinationobj [ 'obj']);
}
if (destinationobj == '부록') {
DragableElementsParentBox.AppendChild (DragoBject);
dragableElementsParentBox.AppEndChild (document.getElementById ( 'clear'));
}
if (dragobject && userectangle) {
dragobject.style.opacity = 1;
dragobject.style.filter = 'alpha (불투명도 = 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;
}
함수 cancelEvent ()
{
거짓을 반환합니다.
}
함수 refitiondRagoBjectArray ()
{
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;
}
함수 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;
카운텔 ++;
}
}
}
함수 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;
카운텔 ++;
}
}
rectanglediv = document.createElement ( 'div');
rectanglediv.id = '사각형';
rectanglediv.style.display = 'none';
dragableElementsParentBox.AppendChild (rectanglediv);
document.body.onmouseMove = MizedRagableElement;
document.body.onmouseup = stop_dragdropelement;
document.body.onselectStart = CanCelSelectionEvent;
document.body.ondragstart = cancelEvent;
wind
DocumentHeight = Document.DocumentELement.ClientHeight;
}
Window.onload = initDragableElements;
</스크립트>
<div id = "MainContainer">
<!-드래그 가능한 콘텐츠를 시작하십시오->
<div id = "dragableElementsParentBox">
<div dragablebox = "true"id = "article1">
<H4> 제목 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.
</div>
<div dragablebox = "true"id = "article2">
<H4> 제목 2 </h4>
<p> splendida porro oculi fugitant vitantque tueri. Sol etiam caecat, contra si tendere pergas, propterea quia vis magnast. </p>
</div>
<div dragablebox = "true"id = "article3">
<H4> 제목 3 </h4>
<p> splendida porro oculi fugitant vitantque tueri. Sol etiam caecat, contra si tendere pergas, propterea quia vis magnast. </p>
</div>
<div dragablebox = "true"id = "article4">
<H4> 제목 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.
</div>
<div dragablebox = "true"id = "article5">
<H4> 제목 5 </h4>
<p> splendida porro oculi fugitant vitantque tueri. Sol etiam caecat, contra si tendere pergas, propterea quia vis magnast. </p>
</div>
<div dragablebox = "true"id = "article6">
<H4> 제목 6 </h4>
<p> splendida porro oculi fugitant vitantque tueri. Sol etiam caecat, contra si tendere pergas, propterea quia vis magnast. </p>
</div>
<div dragablebox = "true"id = "article7">
<H4> 제목 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.
</div>
<div dragablebox = "true"id = "article8">
<H4> 제목 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.
</div>
<div dragablebox = "true"id = "article9">
<H4> 제목 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.
</div>
<div id = "clear"> </div>
</div>
<!-종료 드래그 콘텐츠->
<input type = "button"value = "save"onclick = "savedata ()">
</div>
<!-필수 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>
<!-종료 필수 divs->
</head>
<body>
</body>
</html>