复制代码代码如下:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = gb2312" />
<title> javaScript 模块随意拖动 </title>
<type type = "text/css">
html {
العرض: 100 ٪ ؛
Overflow-X: Hidden ؛
}
جسم{
Font-Family: Trebuchet MS ، Lucida Sans Unicode ، Arial ، Sans-Serif ؛
العرض: 100 ٪ ؛
الهامش: 0px ؛
الحشو: 0px ؛
محاذاة النص: المركز ؛
خلفية اللون:#e2ebed ؛
حجم الخط: 0.7EM ؛
Overflow-X: Hidden ؛
}
#MainContainer {
العرض: 600 بكسل ؛
الهامش: 0 Auto ؛
محاذاة النص: اليسار ؛
خلفية اللون: #fff ؛
}
H4 {
الهامش: 0px ؛
}
ص {
الهامش: 5 بكسل ؛
}
#DraGableEmentsParentBox {
الحشو: 10 بكسل ؛
}
.smallarticle ، .bigarticle {
تعويم: اليسار.
الحدود: 1 بكسل الصلبة #000 ؛
خلفية اللون: #DDD ؛
الحشو: 2px ؛
يمين الهامش: 10px ؛
هامش القاع: 5 بكسل ؛
}
.smallarticle IMG ، .bigarticle IMG {
تعويم: اليسار.
الحشو: 5 بكسل ؛
}
.
تعويم: صحيح.
}
.smallarticle {
العرض: 274 بكسل ؛
}
.bigarticle {
العرض: 564px ؛
}
.واضح{
واضح: كلاهما ؛
}
#المستطيل{
تعويم: اليسار.
الحدود: 1px منقط #F00 ؛
خلفية اللون: #fff ؛
}
#Insertionmarker {
العرض: 6px ؛
الموقف: مطلق ؛
العرض: لا شيء ؛
}
#Insertionmarker IMG {
تعويم: اليسار.
}
#dragdropmovelayer {
الموقف: مطلق ؛
العرض: لا شيء ؛
الحدود: 1 بكسل الصلبة #000 ؛
مرشح: ألفا (عتامة = 50) ؛
العتامة: 0.5 ؛
}
</style>
<script type = "text/javaScript">
var rectangleborderwidth = 2 ؛
var userectangle = false ؛
var autoscrollspeed = 4 ؛
وظيفة SaveData ()
{
var savestring = "" ؛
لـ (var no = 0 ؛ no <dragableObjectArray.length ؛ no ++) {
if (savestring.length> 0) savestring = savestring + '؛' ؛
المرجع = dragableObjectArray [no] ؛
Savestring = Savestring + Ref ['obj']. id ؛
}
تنبيه (حفظ) ؛
}
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 = 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 ؛
وظيفة getToppos (inpectOBJ)
{
var returnvalue = inpectobj.offsettop ؛
بينما ((inpectobj = inpectobj.offsetParent)! = null) {
if (inpectobj.tagname! = 'html') returnValue += inpectObj.offSettop ؛
}
إرجاع القيمة ؛
}
وظيفة getleftpos (inpectOBJ)
{
var returnvalue = inpectobj.offsetLeft ؛
بينما ((inpectobj = inpectobj.offsetParent)! = null) {
if (inpectobj.tagname! = 'html') returnValue += inpectObj.offSetLeft ؛
}
إرجاع القيمة ؛
}
الوظيفة concelselectionevent ()
{
if (dragdroptimer> = 0) إرجاع خطأ ؛
العودة صحيح.
}
وظيفة getObjectFropposing (x ، y)
{
var height = DragObject.OffSetheight ؛
var width = DragObject.OffSetWidth ؛
var indexCurrentDragObject = -5 ؛
لـ (var no = 0 ؛ no <dragableObjectArray.length ؛ no ++) {
المرجع = 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']
if (! userEctangle && dragableObjectArray [no] ['obj'] == DragObject) إرجاع 'self' ؛
if (indexCurrentDragObject == (no-1)) إرجاع "الذات" ؛
مجموعة العودة (dragableObjectArray [no] ، لا) ؛
}
if (x> (Ref ['ref [' left '] + (Ref [' 'width']/2)) && y> ref ['top'] && x <(ref ['left'] + ref ['width']) && y <(ref ['top']
إذا (لا <dragableObjectArray.length-1) {
if (no == indexCurrentDragObject || (no == indexCurrentDragObject-1)) {
العودة "الذات" ؛
}
if (dragableObjectArray [no] ['obj']! = dragoBject) {
مجموعة العودة (dragableObjectArray [no+1] ، no+1) ؛
}آخر{
إذا (! userectangle) إرجاع "الذات" ؛
إذا (لا <dragableObjectArray.length-2) ، فإن مجموعة الإرجاع (dragableObjectArray [no+2] ، no+2) ؛
}
}آخر{
if (dragableObjectArray [dragableObjectArray.length-1] ['obj']! = dragoBject) return 'append' ؛
}
}
إذا (لا <dragableObjectArray.length-1) {
if (x> (ref ['left'] + ref ['width']) && y> ref ['top'] && y <(ref ['top']
مجموعة العودة (dragableObjectArray [no+1] ، no+1) ؛
}
}
}
if (x> Ref ['left'] && y> (Ref ['top'] + Ref ['height'])) return 'append' ؛
العودة كاذبة
}
وظيفة initdrag (هـ)
{
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 = هذا ؛
إذا (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.nextsibling) {
DragObjectNextObj = this.nextsibling ؛
if (! dragObjectNextObj.tagname) DragObjectNextObj = DragObjectNextObj.nextsibling ؛
}
initdragtimer () ؛
العودة كاذبة
}
وظيفة initdragtimer ()
{
if (dragdroptimer> = 0 && dragdroptimer <10) {
dragdroptimer ++ ؛
setTimeout ('initdragtimer ()' ، 5) ؛
يعود؛
}
if (dragdroptimer == 10) {
إذا (userectangle) {
DragObject.Style.Opacity = 0.5 ؛
DragObject.style.filter = 'alpha (عتامة = 50)' ؛
dragobject.style.cursor = 'default' ؛
}آخر{
var newObject = DragObject.clonenode (true) ؛
DragDropMovelayer.AppendChild (NewObject) ؛
}
}
}
وظيفة autoscroll (الاتجاه ، YPOS)
{
if (document.documentElement.scrollheight> documentscrollheight && direction> 0) return ؛
window.scrollby (0 ، الاتجاه) ؛
إذا (الاتجاه <0) {
if (document.documentElement.scrolltop> 0) {
mouse_y = mouse_y - الاتجاه ؛
إذا (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 - الاتجاه ؛
إذا (userectangle) {
DragObject.style.top = (el_y - mouse_y + ypos) + 'px' ؛
}آخر{
dragdropMovelayer.style.top = (el_y - mouse_y + ypos) + 'px' ؛
}
}آخر{
Autoscrollactive = false ؛
}
}
إذا (autoscrollactive) setTimeOut ('autoscroll (' + direction + '،' + ypos + ')' ، 5) ؛
}
وظيفة quistragablelement (هـ)
{
if (document.all) e = event ؛
إذا (dragdroptimer <10) العودة ؛
إذا (! allowrectanglemove) العودة خطأ ؛
if (e.clienty <50 || e.clienty> (documentheight-50)) {
if (e.clienty <50 &&!
Autoscrollactive = صحيح ؛
Autoscroll ((autoscrollspeed*-1) ، e.clienty) ؛
}
if (
Autoscrollactive = صحيح ؛
Autoscroll (autoscrollspeed ، e.clienty) ؛
}
}آخر{
Autoscrollactive = false ؛
}
إذا (userectangle) {
if (dragoBject.style.position! = 'absiolute') {
DragObject.Style.position = 'absomute' ؛
setTimeout ('REPOCATINDRAGOBJECTARRAY ()' ، 50) ؛
}
}
إذا (userectangle) {
rectanglediv.style.display = 'block' ؛
}آخر{
insertionMarkerDiv.Style.Display = 'block' ؛
DragDropMovelayer.style.display = 'block' ؛
}
إذا (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 = getObjectFropposition (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 = الوجهة ؛
إذا (userectangle) {
DestinationObj ['obj']. parentnode.insertbefore (rectanglediv ، destinationObj ['obj']) ؛
repositedDragObjectArray () ؛
}آخر{
if (dest [1]> 0 && (dragableObjectArray [dest [1] -1] ['obj'].
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' ؛
}آخر{
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' ؛
الوجهة = القدر ؛
}
if (dest == 'إلحاح') {
إذا (userectangle) {
DragableEmentsParentBox.AppendChild (rectanglediv) ؛
DragableEmentsParentBox.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' ؛
}
الوجهة = القدر ؛
repositedDragObjectArray () ؛
}
if (userectangle &&! dest) {
الوجهة = CurrentDest ؛
}
levrectanglemove = false ؛
setTimeout ('lemetRectanglemove = true' ، 50) ؛
}
وظيفة stop_dragdropelement ()
{
dragdroptimer = -1 ؛
if (DestinationObj && DestinationObj! = 'append' && DestinationObj! = 'Self') {
DestinationObj ['obj']. parentNode.InserTbefore (DragObject ، DestinationObj ['obj']) ؛
}
إذا (الوجهة == 'إلحاح') {
DragableEmentsParentBox.AppendChild (DragObject) ؛
DragableEmentsParentBox.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 () ؛
الوجهة = خطأ ؛
if (dragdropMovelayer) {
dragdropMovelayer.style.display = 'none' ؛
dragdropMovelayer.innerhtml = '' ؛
}
Autoscrollactive = false ؛
DocumentScrollheight = document.documentElement.scrollheight + 100 ؛
}
وظيفة CancelEvent ()
{
العودة كاذبة
}
وظيفة إعادة تحديد موقع اطلاع
{
لـ (var no = 0 ؛ no <dragableObjectArray.length ؛ no ++) {
المرجع = dragableObjectArray [no] ؛
Ref ['Left'] = getleftpos (Ref ['obj']) ؛
Ref ['top'] = getToppos (Ref ['obj']) ؛
}
DocumentScrollheight = document.documentElement.scrollheight + 100 ؛
documentheight = document.documentElement.clientheight ؛
}
وظيفة إعادة التعاونية ()
{
DragableBjectArray.length = 0 ؛
var subdivs = dragableEmentsParentBox.getElementSbyTagName ('*') ؛
var countel = 0 ؛
لـ (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 ؛
dragableBjectArray [index] = new Array () ؛
المرجع = dragableObjectArray [الفهرس] ؛
المرجع ['obj'] = subdivs [no] ؛
Ref ['width'] = subdivs [no] .OffSetWidth ؛
Ref ['height'] = subdivs [no] .OffSetHeight ؛
Ref ['Left'] = getleftpos (subdivs [no]) ؛
Ref ['top'] = getToppos (subdivs [no]) ؛
المرجع ['index'] = countel ؛
Countel ++ ؛
}
}
}
وظيفة initDragableEments ()
{
DragableEmentsParentBox = document.getElementById ('DragableEmentsParentBox') ؛
insertionMarkerDiv = document.getElementById ('insertionMarker') ؛
insertionMarkerLine = document.getElementById ('insertionMarkerLine') ؛
DragableAreaWidth = dragableEmentsParentBox.OffSetWidth ؛
if (! userectangle) {
DragDropMovelayer = document.createElement ('div') ؛
DragDropMovelayer.id = 'DragDropMovelayer' ؛
document.body.appendChild (DragDropMovelayer) ؛
}
var subdivs = dragableEmentsParentBox.getElementSbyTagName ('*') ؛
var countel = 0 ؛
لـ (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 ؛
dragableBjectArray [index] = new Array () ؛
المرجع = dragableObjectArray [الفهرس] ؛
المرجع ['obj'] = subdivs [no] ؛
Ref ['width'] = subdivs [no] .OffSetWidth ؛
Ref ['height'] = subdivs [no] .OffSetHeight ؛
Ref ['Left'] = getleftpos (subdivs [no]) ؛
Ref ['top'] = getToppos (subdivs [no]) ؛
المرجع ['index'] = countel ؛
Countel ++ ؛
}
}
rectanglediv = document.createElement ('div') ؛
rectanglediv.id = 'rectangle' ؛
rectanglediv.style.display = 'none' ؛
DragableEmentsParentBox.AppendChild (rectanglediv) ؛
document.body.onmousemove = quadragableEment ؛
document.body.onmouseup = stop_dragdropelement ؛
document.body.OnsElectStart = cancelselectionevent ؛
document.body.OndRagStart = cancelEvent ؛
window.onresize = respositedDragObjectArray ؛
documentheight = document.documentElement.clientheight ؛
}
window.onload = initDragableEments ؛
</script>
<div id = "maincontainer">
<!-ابدأ المحتوى القابل للسحب->
<div id = "DragableEmentsParentBox">
<div dragablebox = "true" id = "article1">
<h4> العنوان 1 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol etiam caecat ، contra si tendere pergas ، properea quia vis magnast ipsius et altea؟ ra per purum simulacra ferunturet feriunt oculos compositia composituras. </p>
</div>
<div dragablebox = "true" id = "article2">
<h4> العنوان 2 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol etiam caecat ، contra si tendere pergas ، properea 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 ، properea 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 ، properea quia vis magnast ipsius et altea؟ ra per purum simulacra ferunturet feriunt oculos compositia composituras. </p>
</div>
<div dragablebox = "true" id = "article5">
<h4> العنوان 5 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol etiam caecat ، contra si tendere pergas ، properea 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 ، properea 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 ، properea quia vis magnast ipsius et altea؟ ra per purum simulacra ferunturet feriunt oculos compositia composituras. </p>
</div>
<div dragablebox = "true" id = "article8">
<H4> العنوان 8 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol etiam caecat ، contra si tendere pergas ، properea quia vis magnast ipsius et altea؟ ra per purum simulacra ferunturet feriunt oculos compositia composituras. </p>
</div>
<div dragablebox = "true" id = "article9">
<h4> العنوان 9 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol etiam caecat ، contra si tendere pergas ، properea quia vis magnast ipsius et altea؟ ra per purum simulacra ferunturet feriunt oculos compositia composituras. </p>
</div>
<div id = "clear"> </viv>
</div>
<!-نهاية محتوى السحب->
<type 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>