复制代码代码如下:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten-tipe" content = "text /html; charset = gb2312" />
<title> javascript 模块随意拖动 </iteme>
<type style = "text/css">
html {
Lebar: 100%;
overflow-x: tersembunyi;
}
tubuh{
Font-Family: Trebuchet MS, Lucida sans Unicode, Arial, Sans-Serif;
Lebar: 100%;
margin: 0px;
padding: 0px;
Teks-Align: tengah;
latar belakang-warna:#e2ebed;
Ukuran font: 0.7em;
overflow-x: tersembunyi;
}
#MainContainer {
Lebar: 600px;
margin: 0 otomatis;
Teks-Align: Kiri;
Latar Belakang-Color: #FFF;
}
h4 {
margin: 0px;
}
P{
margin-top: 5px;
}
#DragableLementsParentBox {
padding: 10px;
}
.smallarticle, .bigarticle {
float: kiri;
Perbatasan: 1px Solid #000;
latar belakang-warna: #ddd;
padding: 2px;
margin-kanan: 10px;
margin-bottom: 5px;
}
.mallarticle img, .bigarticle img {
float: kiri;
padding: 5px;
}
.smallarticle .rightimage, .bigarticle .rightimage {
float: benar;
}
.smallarticle {
Lebar: 274px;
}
.bigarticle {
Lebar: 564px;
}
.jernih{
jelas: keduanya;
}
#persegi panjang{
float: kiri;
Perbatasan: 1px bertitik #F00;
Latar Belakang-Color: #FFF;
}
#insertionmarker {
Lebar: 6px;
Posisi: Absolute;
Tampilan: Tidak Ada;
}
#insertionmarker img {
float: kiri;
}
#DragdropMovelayer {
Posisi: Absolute;
Tampilan: Tidak Ada;
Perbatasan: 1px Solid #000;
filter: alpha (opacity = 50);
Opacity: 0,5;
}
</tyle>
<type skrip = "Teks/JavaScript">
var rectangleborgerwidth = 2;
var userectangle = false;
var autoscrollspeed = 4;
fungsi savedata ()
{
var saveString = "";
untuk (var no = 0; no <dragableObjectArray.length; no ++) {
if (saveString.length> 0) saveString = saveString + ';';
Ref = DragableObjectArray [Tidak];
saveString = saveString + ref ['obj']. id;
}
waspada (saveString);
}
var DragableElementsParentBox;
var opera = navigator.appversion.indexof ('opera')> = 0? true: false;
var rectanglediv = false;
var insertonmarkerDiv = false;
var mouse_x;
var mouse_y;
var el_x;
var el_y;
var dragdroptimer = -1;
var dragObject = false;
var dragObjectNextObj = false;
var dragableObjectArray = array baru ();
var destinationObj = false;
var currentDest = false;
var izinRectanglemove = true;
var insertonmarkerline;
var dragdropmovelayer;
var autoscrollactive = false;
var documentheight = false;
var documentscrollheight = false;
var dragableareawidth = false;
fungsi gettoppos (inputObj)
{
var returnValue = inputObj.offsettop;
while ((inputoBj = inputoBj.offsetParent)! = null) {
if (inputoBj.tagname! = 'html') returnValue += inputObj.offsettop;
}
Return ReturnValue;
}
fungsi getLeftPos (inputObj)
{
var returnValue = inputObj.offsetleft;
while ((inputoBj = inputoBj.offsetParent)! = null) {
if (inputoBj.tagname! = 'html') returnValue += inputObj.offsetleft;
}
Return ReturnValue;
}
fungsi cancelselectionEvent ()
{
if (dragdroptimer> = 0) return false;
Kembali Benar;
}
Fungsi getObjectFromposition (x, y)
{
var height = dragObject.offsetHeight;
var width = dragObject.offsetWidth;
var indexCurrentDragObject = -5;
untuk (var no = 0; no <dragableObjectArray.length; no ++) {
Ref = DragableObjectArray [Tidak];
if (ref ['obj'] == dragObject) indexCurrentDragObject = no;
if (no <dragableObjectArray.length-1 && dragableObjectArray [no+1] ['obj'] == dragObject) indexCurrentDragObject = no+1;
if (ref ['obj'] == dragObject && userectangle) lanjutkan;
if (x> ref ['left'] && y> ref ['top'] && x <(ref ['left'] + (ref ['width']/2)) && y <(ref ['top'] + ref ['height'])) {
if (! Userectangle && dragableObjectArray [Tidak] ['obj'] == dragObject) return 'self';
if (indexCurrentDragObject == (no-1)) mengembalikan 'self';
return array (dragableObjectArray [tidak], tidak);
}
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)) {
mengembalikan 'diri';
}
if (dragableObjectArray [tidak] ['obj']! = dragObject) {
return array (dragableObjectArray [no+1], no+1);
}kalau tidak{
if (! Userectangle) mengembalikan 'diri';
if (no <dragableObjectArray.length-2) return array (dragableObjectArray [no+2], no+2);
}
}kalau tidak{
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']) {
return array (dragableObjectArray [no+1], no+1);
}
}
}
if (x> ref ['left'] && y> (ref ['top'] + ref ['height'])) return 'apend';
mengembalikan false;
}
fungsi 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 (ini)/1;
el_y = gettoppos (ini)/1;
dragObject = ini;
if (userectangle) {
rectanglediv.style.width = this.clientWidth - (rectangleBorgerWidth*2) +'px';
rectanglediv.style.height = this.clientHeight - (rectangleborgerwidth*2) +'px';
rectanglediv.classname = this.classname;
}kalau tidak{
insertonmarkerline.style.width = '6px';
}
dragdroptimer = 0;
dragobjectNextObj = false;
if (this.nextsibling) {
dragObjectNextObj = this.NextSibling;
if (! dragObjectNextObj.tagname) dragObjectNextObj = dragObjectNextObj.nextSibling;
}
initdragtimer ();
mengembalikan false;
}
fungsi initdragtimer ()
{
if (dragdroptimer> = 0 && dragDropTimer <10) {
DragDropTimer ++;
setTimeout ('initdragtimer ()', 5);
kembali;
}
if (dragdroptimer == 10) {
if (userectangle) {
dragobject.style.opacity = 0.5;
dragobject.style.filter = 'alpha (opacity = 50)';
dragobject.style.cursor = 'default';
}kalau tidak{
var newObject = dragObject.clonenode (true);
dragdropmovelayer.appendchild (newObject);
}
}
}
fungsi autoscroll (arah, ypos)
{
if (document.documentelement.scrollheight> documentscrollHeight && arah> 0) kembali;
window.scrollby (0, arah);
if (arah <0) {
if (document.documentelement.scrolltop> 0) {
mouse_y = mouse_y - arah;
if (userectangle) {
dragobject.style.top = (el_y - mouse_y + ypos) + 'px';
}kalau tidak{
dragDropMovelayer.style.top = (el_y - mouse_y + ypos) + 'px';
}
}kalau tidak{
autoscrollactive = false;
}
}kalau tidak{
if (ypos> (DocumentHeight-50)) {
mouse_y = mouse_y - arah;
if (userectangle) {
dragobject.style.top = (el_y - mouse_y + ypos) + 'px';
}kalau tidak{
dragDropMovelayer.style.top = (el_y - mouse_y + ypos) + 'px';
}
}kalau tidak{
autoscrollactive = false;
}
}
if (autoscrollactive) setTimeout ('Autoscroll (' + Direction + ',' + ypos + ')', 5);
}
Fungsi dipindahkanragableElement (e)
{
if (document.all) e = event;
if (dragdroptimer <10) kembali;
if (! Idlowrectanglemove) mengembalikan 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);
}
}kalau tidak{
autoscrollactive = false;
}
if (userectangle) {
if (dragobject.style.position! = 'absolute') {
dragobject.style.position = 'absolute';
setTimeout ('RepositionDragObjectArray ()', 50);
}
}
if (userectangle) {
rectanglediv.style.display = 'block';
}kalau tidak{
insertonmarkerDiv.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';
}kalau tidak{
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 ();
}kalau tidak{
if (dest [1]> 0 && (dragableObjectArray [dest [1] -1] ['obj']. offsetleft + dragableObjectArray [dest [1] -1] ['width'] + dragObject.offsetWidth) <dragableAreWidth) {
insertonmarkerDiv.style.left = (getLeftPos (dragableObjectArray [dest [1] -1] ['obj']) + dragableObjectArray [dest [1] -1] ['width'] + 2) + 'px';
insertonmarkerDiv.style.top = (gettoppos (dragableObjectArray [dest [1] -1] ['obj']) - 2) + 'px';
insertonmarkerline.style.height = dragableObjectArray [dest [1] -1] ['height'] + 'px';
}kalau tidak{
insertonmarkerDiv.style.left = (getLeftpos (destinationObj ['obj']) - 8) + 'px';
insertonmarkerDiv.style.top = (gettoppos (destinationObj ['obj']) - 2) + 'px';
insertonmarkerline.style.height = destinationObj ['height'] + 'px';
}
}
}
}
if (dest == 'self' ||! dest) {
insertonmarkerDiv.style.display = 'none';
destinationObj = dest;
}
if (dest == 'append') {
if (userectangle) {
DragableElementsParentBox.AppendChild (Rectanglediv);
dragableElementsparentbox.appendChild (document.geteLementById ('clear'));
}kalau tidak{
var tmpref = dragableObjectArray [dragableObjectArray.length-1];
insertonmarkerDiv.style.left = (getLeftPos (tmpref ['obj']) + 2) + tmpref ['width'] + 'px';
insertonmarkerDiv.style.top = (getToppos (tmpref ['obj']) - 2) + 'px';
insertonmarkerline.style.height = tmpref ['height'] + 'px';
}
destinationObj = dest;
RepositionDragObjectArray ();
}
if (userectangle &&! dest) {
DestinationObj = CurrentDest;
}
Idlowrectanglemove = false;
setTimeout ('izinRectanglemove = true', 50);
}
fungsi 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 = 'tidak ada';
insertonmarkerDiv.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;
}
fungsi cancelEvent ()
{
mengembalikan false;
}
Fungsi RepositionDragObjectArray ()
{
untuk (var no = 0; no <dragableObjectArray.length; no ++) {
Ref = DragableObjectArray [Tidak];
ref ['left'] = getLeftPos (ref ['obj']);
ref ['atas'] = getToppos (ref ['obj']);
}
DocumentsCrollHeight = Document.DocumentElement.ScrollHeight + 100;
DocumentHeight = Document.DocumentElement.ClientHeight;
}
function resetObjectArray ()
{
dragableObjectArray.length = 0;
var subdivs = dragableElementsparentbox.getElementsbyTagname ('*');
var countel = 0;
untuk (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] = array baru ();
Ref = DragableObjectArray [indeks];
ref ['obj'] = subdivs [tidak];
ref ['width'] = subdivs [tidak] .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');
insertonmarkerDiv = document.getElementById ('insertonmarker');
insertonmarkerline = document.getElementById ('insertonmarkerline');
dragableareAwidth = dragableElementsparentbox.offsetWidth;
if (! Userectangle) {
dragDropMovelayer = document.createelement ('div');
dragDropMovelayer.id = 'dragDropMovelayer';
Document.Body.AppendChild (DragDropMovelayer);
}
var subdivs = dragableElementsparentbox.getElementsbyTagname ('*');
var countel = 0;
untuk (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 [tidak] .onmousedown = initdrag;
var index = dragableObjectArray.length;
DragableObjectArray [index] = array baru ();
Ref = DragableObjectArray [indeks];
ref ['obj'] = subdivs [tidak];
ref ['width'] = subdivs [tidak] .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 = 'tidak ada';
DragableElementsParentBox.AppendChild (Rectanglediv);
document.body.onmouseMove = dipindahkanragableElement;
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">
<!-Mulai konten yang dapat diseret->
<div id = "dragableElementsparentbox">
<Div DragableBox = "true" id = "artikel1">
<h4> Heading 1 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol Etiam Caecat, Kontra Si Tendere Pergas, Propterea Quia Vis Magnast Ipsius et altea? Ra per purum simulacra ferunturet feriunt oculos turbantia compositura. </p>
</div>
<Div DragableBox = "true" id = "artikel2">
<h4> Heading 2 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol Etiam Caecat, Kontra Si Tendere Pergas, Propterea Quia vis Magnast. </p>
</div>
<Div DragableBox = "true" id = "artikel3">
<h4> Heading 3 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol Etiam Caecat, Kontra Si Tendere Pergas, Propterea Quia vis Magnast. </p>
</div>
<Div DragableBox = "true" id = "artikel4">
<h4> Heading 4 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol Etiam Caecat, Kontra Si Tendere Pergas, Propterea Quia Vis Magnast Ipsius et altea? Ra per purum simulacra ferunturet feriunt oculos turbantia compositura. </p>
</div>
<Div DragableBox = "true" id = "artikel5">
<h4> Heading 5 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol Etiam Caecat, Kontra Si Tendere Pergas, Propterea Quia vis Magnast. </p>
</div>
<Div DragableBox = "true" id = "artikel6">
<h4> Heading 6 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol Etiam Caecat, Kontra Si Tendere Pergas, Propterea Quia vis Magnast. </p>
</div>
<Div DragableBox = "true" id = "artikel7">
<h4> Heading 7 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol Etiam Caecat, Kontra Si Tendere Pergas, Propterea Quia Vis Magnast Ipsius et altea? Ra per purum simulacra ferunturet feriunt oculos turbantia compositura. </p>
</div>
<Div DragableBox = "true" id = "artikel8">
<h4> Heading 8 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol Etiam Caecat, Kontra Si Tendere Pergas, Propterea Quia Vis Magnast Ipsius et altea? Ra per purum simulacra ferunturet feriunt oculos turbantia compositura. </p>
</div>
<Div DragableBox = "true" id = "artikel9">
<h4> Heading 9 </h4>
<p> Splendida porro oculi fugitant vitantque tueri. Sol Etiam Caecat, Kontra Si Tendere Pergas, Propterea Quia Vis Magnast Ipsius et altea? Ra per purum simulacra ferunturet feriunt oculos turbantia compositura. </p>
</div>
<Div id = "clear"> </div>
</div>
<!-Akhiri konten yang dapat diseret->
<input type = "tombol" value = "save" onclick = "saveData ()">
</div>
<!-Divs yang Diperlukan->
<Div id = "insertonmarker">
<img src = "/jscss/demoimg/200906/marker_top.gif">
<img src = "/jscss/demoiMg/200906/marker_middle.gif" id = "insertonmarkerline">
<img src = "/jscss/demoimg/200906/marker_bottom.gif">
</div>
<!-Akhiri Divs yang Diperlukan->
</head>
<body>
</body>
</html>