DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 用來實現Web頁面圖片移動托拽的代碼段
用來實現Web頁面圖片移動托拽的代碼段
編輯:關於JavaScript     

以下這段JS是主要解決在畫面生成Image項目,並通過鼠標事件進行脫拽、移動等操作的代碼。
<script language="javascript" type="text/javascript">
var top,left;
var src,drag,dir,ope,refer,halfwidth;
var unit=30;

var aryItems,itemNum=10,index,isInit,id,max=23;

function PageLoad()
{
    document.form1.onsubmit=OnSubmit;

    aryItems=new Array(itemNum);
    top=document.getElementById("TABLE").getClientRects()[0].top;
    left=document.getElementById("TABLE").getClientRects()[0].left;
   
    if(document.getElementById("__Gantt").value!=null&&document.getElementById("__Gantt").value!="")
    {
        var gantt=document.getElementById("__Gantt").value;
        var array=gantt.split(";");
        var length=array.length-1;
        var start,width,item;
       
        for(index=0;index<length;index++)
        {
            item=array[index].split(",");
            start=item[0];
            width=item[1];
           
            id="Item"+index;
            aryItems[index]=id;
           
            var track = document.createElement("IMG");
            track.setAttribute("id",id);
            track.setAttribute("src","blue.gif");

            document.body.appendChild(track);
            document.getElementById(id).style.position="absolute";
            document.getElementById(id).style.top=top+unit*index;
            document.getElementById(id).style.left=left+unit*start;
            document.getElementById(id).width=unit*width;
            document.getElementById(id).style.zIndex=9;
        }
    }
    else
    {
 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved