复制代码代码如下:
<! 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>
<стиль типа = "text/css">
html {
Ширина: 100%;
Overflow-X: скрытый;
}
тело{
Фонт-семья: Требуше М.С., Люсида Санс Юникод, Ариал, Санс-Сэриф;
Ширина: 100%;
поля: 0px;
Заполнение: 0px;
Текст-альбом: Центр;
фоновый цвет:#e2ebed;
размер шрифта: 0,7 эм;
Overflow-X: скрытый;
}
#maincontainer {
Ширина: 600px;
Поле: 0 Авто;
Текст-альбом: слева;
фоновый цвет: #fff;
}
H4 {
поля: 0px;
}
p {
маржинальная версия: 5px;
}
#DragableElementsParentBox {
Заполнение: 10px;
}
.smallarticle, .bigarticle {
Плавание: осталось;
Граница: 1PX SOLID #000;
фоновый цвет: #DDD;
Заполнение: 2px;
Право маржи: 10px;
маржинальный бат: 5px;
}
.smallarticle img, .bigarticle img {
Плавание: осталось;
Заполнение: 5px;
}
.smallarticle .rightimage, .bigarticle .rightimage {
Поплавок: верно;
}
.smallarticle {
Ширина: 274px;
}
.bigarticle {
Ширина: 564px;
}
.прозрачный{
ясно: оба;
}
#прямоугольник{
Плавание: осталось;
Граница: 1px пунктир #f00;
фоновый цвет: #fff;
}
#insertionmarker {
Ширина: 6px;
позиция: абсолютно;
дисплей: нет;
}
#insertionmarker img {
Плавание: осталось;
}
#dragdropmovelayer {
позиция: абсолютно;
дисплей: нет;
Граница: 1PX SOLID #000;
Фильтр: альфа (непрозрачность = 50);
непрозрачность: 0,5;
}
</style>
<script type = "text/javascript">
var rectangleborderwidth = 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;
}
бдительность (спасение);
}
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 destineObj = false;
var currentdest = false;
var AlluctRectAngLemove = true;
var inserticemarkerline;
var dragdropmovelayer;
var AutoScrollactact = 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;
}
returnValue;
}
функция getleftpos (inputobj)
{
var returnValue = inputObj.offsetleft;
while ((inputobj = inputobj.offsetparent)! = null) {
if (inputobj.tagname! = 'html') returnvalue += inputobj.offsetleft;
}
returnValue;
}
Функция CANCELSELECEEVENT ()
{
if (dragdroptimer> = 0) вернуть false;
вернуть истину;
}
function getObjectFroposition (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']/2)) && y <(ref ['top'] + ref ['height'])) {
if (! userectangle && dragablebjectarray [no] ['obj'] == DragObject) вернуть «self»;
if (indexcurrentdragobject == (no-1)) вернуть «self»;
return Array (DragableObjectArray [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) {
return Array (DragableObjectArray [no+1], no+1);
}еще{
if (! userectangle) вернуть «я»;
if (no <DragableObjectArray.length-2) верховный массив (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 <dragablebjectarray [no + 1] ['top']) {
return Array (DragableObjectArray [no+1], no+1);
}
}
}
if (x> ref ['left'] && y> (ref ['top'] + ref ['height'])) return 'adpend';
вернуть ложь;
}
функция 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 (это)/1;
el_y = getToppos (this)/1;
dragobject = это;
if (userectangle) {
rectanglediv.style.width = this.clientwidth - (rectangleborderwidth*2) +'px';
rectanglediv.style.height = this.clientheight - (rectangleborderwidth*2) +'px';
rectanglediv.classname = this.classname;
}еще{
InsertionMarkerline.style.width = '6px';
}
Dragdroptimer = 0;
dragobjectnextobj = false;
if (this.nextibling) {
dragobjectnextobj = this.nextibling;
if (! dragobjectnextobj.tagname) dragobjectnextobj = dragobjectnextobj.nextibling;
}
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 = 'по умолчанию';
}еще{
var newObject = dragobject.clonenode (true);
Dragdropmovelayer.appendchild (NewObject);
}
}
}
Функция AutoScroll (направление, YPO)
{
if (document.documentelement.scrollheight> documentscrollheight && направление> 0) return;
window.scrollby (0, направление);
if (направление <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';
}
}еще{
AutoScrollactaint = 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';
}
}еще{
AutoScrollactaint = false;
}
}
if (autoscrollactaint) setTimeout ('autoScroll (' + direction + ',' + ypos + ')', 5);
}
Функция перемещается (e)
{
if (document.all) e = event;
if (dragdroptimer <10) return;
if (! alluctrectanglemove) вернуть false;
if (e.clienty <50 || e.clienty> (DocumentHeight-50)) {
if (e.clienty <50 &&! AutoScrollactaint) {
AutoScrollactaint = true;
AutoScroll ((AutoScrollSpeed*-1), E.Clienty);
}
if (e.clienty> (documentHeight-50) && document.documentelement.scrollheight <= documentscrollheight &&! autoscrollactaint) {
AutoScrollactaint = true;
AutoScroll (AutoScrollspeed, E.Clienty);
}
}еще{
AutoScrollactaint = false;
}
if (userectangle) {
if (dragobject.style.position! = 'Absolute') {
dragobject.style.position = 'Absolute';
setTimeout ('RepositionDragobjectArray ()', 50);
}
}
if (userectangle) {
rectanglediv.style.display = 'block';
}еще{
insertionmardiv.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';
}еще{
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 = getObjectFroposition (e.clientx+math.max (document.brollleft, document.documentelement.scrollleft), e.clienty+math.max (document.scrolltop, document.documentelement.scrolltop));
if (dest! == false && dest! = 'Приложение' && dest! = 'self') {
destinationObj = dest [0];
if (currentdest! == destinationObj) {
currentDest = destinationObj;
if (userectangle) {
destinationobj ['obj']. parentnode.insertbefore (rectanglediv, destinationobj ['obj']);
repositiondragobjectarray ();
}еще{
if (dest [1]> 0 && (DragableObjectArray [dest [1] -1] ['obj']. offsetleft + dragableObjectArray [dest [1] -1] ['width'] + dragobject.offsetwidth) <dragableAreaWidth) {
insertionmardiv.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';
}еще{
insertionMarkerDiv.Style.left = (getleftpos (destinationObj ['obj']) - 8) + 'px';
insertionmardiv.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'));
}еще{
var tmpref = DragableObjectArray [DragableObjectArray.length-1];
insertionMarkerDiv.Style.left = (getleftpos (tmpref ['obj']) + 2) + tmpref ['width'] + 'px';
insertionmardiv.style.top = (getToppos (tmpref ['obj']) - 2) + 'px';
insertionmarkerline.style.height = tmpref ['height'] + 'px';
}
destinationObj = dest;
repositiondragobjectarray ();
}
if (userectangle &&! dest) {
destinationObj = currentDest;
}
AllingRectAngLemove = 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 (непрозрачность = 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 = '';
}
AutoScrollactaint = false;
documentscrollheight = document.documentelement.scrollheight + 100;
}
Функция Cancelevent ()
{
вернуть ложь;
}
Функция 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;
}
Функция resetobjectarray ()
{
DragableObjectArray.length = 0;
var subdivs = DragableEmentementsParentBox.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 = dragablebjectarray.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 ++;
}
}
}
Функция initDragableElements ()
{
DragableElementsParentBox = Document.GetElementById ('DragableElementsParentBox');
insertionMarkerdiv = document.getElementById ('insertionMarker');
InsertionMarkerline = document.getElementById ('InsertionMarkerLine');
DragableAreaWidth = DragableEmentementsParentBox.OffSetWidth;
if (! userectangle) {
dragdropmovelayer = document.createElement ('div');
dragdropmovelayer.id = 'dragdropmovelayer';
document.body.appendchild (Dragdropmovelayer);
}
var subdivs = DragableEmentementsParentBox.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 [нет] .onmouseDown = initDrag;
var index = dragablebjectarray.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 = rowtragableElement;
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">
<!-Начните перетаскивать контент->
<div id = "DragableEmentementsParentBox">
<div Dragablebox = "true" id = "article1">
<h4> заголовок 1 </h4>
<p> splendida porro oculi fugitant vitantque tueri. Soltiam Caecat, Contra Si Tendere Pergas, Propterea Quia vis magnast ipsius et altea?
</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. Soltiam Caecat, Contra Si Tendere Pergas, Propterea Quia vis magnast ipsius et altea?
</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. Soltiam Caecat, Contra Si Tendere Pergas, Propterea Quia vis magnast ipsius et altea?
</div>
<div Dragablebox = "true" id = "article8">
<h4> заголовок 8 </h4>
<p> splendida porro oculi fugitant vitantque tueri. Soltiam Caecat, Contra Si Tendere Pergas, Propterea Quia vis magnast ipsius et altea?
</div>
<div Dragablebox = "true" id = "article9">
<h4> заголовок 9 </h4>
<p> splendida porro oculi fugitant vitantque tueri. Soltiam Caecat, Contra Si Tendere Pergas, Propterea Quia vis magnast ipsius et altea?
</div>
<div id = "clear"> </div>
</div>
<!-Конец перетаскиваемого контента->
<input type = "button" value = "save" onclick = "savedata ()">
</div>
<!-Требуется divs->
<div id = "inserticeMarker">
<img src = "/jscss/demoimg/200906/marker_top.gif">
<img src = "/jscss/demoimg/200906/marker_middle.gif" id = "inserticemarkerline">
<img src = "/jscss/demoimg/200906/marker_bottom.gif">
</div>
<!-Конец Требуется Divs->
</head>
<тело>
</body>
</html>