复制代码代码如下:
<!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">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<Title> JavaScript </title>
<style type = "text/css">
html {
幅:100%;
Overflow-X:非表示;
}
体{
フォントファミリー:Trebuchet MS、Lucida Sans Unicode、Arial、Sans-Serif;
幅:100%;
マージン:0px;
パディング:0px;
テキストアライグ:センター;
バックグラウンドカラー:#e2ebed;
フォントサイズ:0.7em;
Overflow-X:非表示;
}
#MainContainer {
幅:600px;
マージン:0 Auto;
テキストアライグ:左;
バックグラウンドカラー:#fff;
}
H4 {
マージン:0px;
}
p {
マージントップ:5px;
}
#dragableElementsParentbox {
パディング:10px;
}
.smallarticle、.bigarticle {
フロート:左;
国境:1pxソリッド#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ソリッド#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;
}
アラート(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;
関数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;
}
関数cancelselectionevent()
{
if(dragdroptimer> = 0)falseを返します。
trueを返します。
}
関数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']/2))&& y <(ref ['top'] + ref ['height']){
if(!userectangle && dragableObjectArray [no] ['obj'] == dragobject)return 'self';
if(indexCurrentDragObject ==(no-1))を「self」を返します。
return array(radableObjectArray [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){
Return Array(dragableObjectArray [no+1]、no+1);
}それ以外{
if(!userectangle) 'self'を返します。
if(no <dragableObjectArray.length-2)return array(radableObjectArray [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']){
Return Array(dragableObjectArray [no+1]、no+1);
}
}
}
if(x> ref ['left'] && y>(ref ['top'] + ref ['height']))return 'append';
falseを返します。
}
関数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(this)/1;
el_y = getToppos(this)/1;
dragObject = this;
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.nextsibling){
dragObjectNextobj = this.nextsibling;
if(!dragObjectNextobj.tagname)dragObjectNextobj = dragObjectNextObj.NextSibling;
}
initdragtimer();
falseを返します。
}
関数initdragtimer()
{
if(dragdroptimer> = 0 && dragdroptimer <10){
dragdroptimer ++;
setimeout( 'initdragtimer()'、5);
戻る;
}
if(dragdroptimer == 10){
if(userectangle){
dragobject.style.opacity = 0.5;
dragobject.style.filter = 'alpha(ofacity = 50)';
dragobject.style.cursor = 'default';
}それ以外{
var newObject = dragobject.cloneNode(true);
dragdropmovelayer.appendchild(newObject);
}
}
}
function autoscroll(方向、ypos)
{
if(document.documentelement.scrollheight> documentscrollheight && direction> 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';
}
}それ以外{
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)setimeout( 'autoscroll(' + direction + '、' + ypos + ')'、5);
}
関数moveRagableElement(e)
{
if(document.all)e = event;
if(dragdroptimer <10)return;
if(!aldawrectanglemove)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!= 'absolute'){
dragobject.style.position = 'absolute';
setimeout( 'repositiondragObjectArray()'、50);
}
}
if(userectangle){
rectanglediv.style.display = 'block';
}それ以外{
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';
}それ以外{
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();
}それ以外{
if(dest [1]> 0 &&(dragableObjectArray [dest [1] -1] ['obj']。offsetLeft + dragableObjectArray [dest [1] -1] ['width'] + dragobject.offsetwidth){dragableareawidth){
InsertionMarkerdiv.style.left =(getLeftpos(dragableObjectArray [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';
destinationobj = dest;
}
if(dest == 'append'){
if(userectangle){
dragableElementsparentbox.appendchild(rectanglediv);
dragableElementsparentbox.appendChild(document.getElementById( 'clear'));
}それ以外{
var tmpref = dragableObjectArray [radableObjectArray.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;
setimeout( 'AllowRectangLemove = true'、50);
}
関数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(ofacity = 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()
{
falseを返します。
}
関数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;
}
function 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;
countel ++;
}
}
}
関数initdragablelements()
{
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;
countel ++;
}
}
rectanglediv = document.createelement( 'div');
rectanglediv.id = 'rectangle';
rectanglediv.style.display = 'none';
dragableElementsparentbox.appendchild(rectanglediv);
document.body.onmousemove = moveRagableElement;
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 = "dragableElementsparentbox">
<div radablebox = "true" id = "article1">
<h4>見出し1 </h4>
<p> Splendida Porro oculi fugitant vitantque tueri。 sol etiam caecat、contra si tendere pergas、propterea quia vis vis magnast ipsius et altea?ra per purum simulacra ferunturet feriunt oculos turbantia 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、Propterea Quia Vis Magnast。</p>
</div>
<div radablebox = "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 radablebox = "true" id = "article4">
<h4>見出し4 </h4>
<p> Splendida Porro oculi fugitant vitantque tueri。 sol etiam caecat、contra si tendere pergas、propterea quia vis vis magnast ipsius et altea?ra per purum simulacra ferunturet feriunt oculos turbantia composituras。</p>
</div>
<div radablebox = "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 radablebox = "true" id = "article7">
<h4>見出し7 </h4>
<p> Splendida Porro oculi fugitant vitantque tueri。 sol etiam caecat、contra si tendere pergas、propterea quia vis vis magnast ipsius et altea?ra per purum simulacra ferunturet feriunt oculos turbantia 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、propterea quia vis vis magnast ipsius et altea?ra per purum simulacra ferunturet feriunt oculos turbantia composituras。</p>
</div>
<div radablebox = "true" id = "article9">
<h4>見出し9 </h4>
<p> Splendida Porro oculi fugitant vitantque tueri。 sol etiam caecat、contra si tendere pergas、propterea quia vis vis magnast ipsius et altea?ra per purum simulacra ferunturet feriunt oculos turbantia composituras。</p>
</div>
<div id = "clear"> </div>
</div>
<! - ドラッグ可能なコンテンツを終了 - >
<入力型= "button" value = "save" onclick = "savedata()">
</div>
<! - 必須div->
<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>