返回列表 發帖
whiteazraellord

Rank: 1

帖子
2 
主題
1 
精華
0 
積分
4 
威望
1  
金錢
1  
1# 跳轉到 » 正序看帖
打印
tT
發表於 2011-5-4 14:24 | 只看該作者

多個DIV共用自由移動DIV的程式

<html >
    <head>
    <style type="text/css">
    .draggable{
    background-color:green;
    font-size:9pt;
    padding:30px;
    color:white;
    width:360px;
    height:224px;
    position:absolute;
    }
    </style>
    <script type="text/javascript">
    var rDrag = {
    o:null,
    init:function(o){
    o.onmousedown = this.start;
    },
    start:function(e){
    var o;
    e = rDrag.fixEvent(e);
    e.preventDefault && e.preventDefault();
    rDrag.o = o = this;
    o.x = e.clientX - rDrag.o.offsetLeft;
    o.y = e.clientY - rDrag.o.offsetTop;
    document.onmousemove = rDrag.move;
    document.onmouseup = rDrag.end;
    },
    move:function(e){
    e = rDrag.fixEvent(e);
    var oLeft,oTop;
    oLeft = e.clientX - rDrag.o.x;
    oTop = e.clientY - rDrag.o.y;
    rDrag.o.style.left = oLeft + 'px';
    rDrag.o.style.top = oTop + 'px';
    },
    end:function(e){
    e = rDrag.fixEvent(e);
    rDrag.o = document.onmousemove = document.onmouseup = null;
    },
    fixEvent: function(e){
    if (!e) {
    e = window.event;
    e.target = e.srcElement;
    e.layerX = e.offsetX;
    e.layerY = e.offsetY;
    }
    return e;
    }
    }
    window.onload = function(){
    var obj = document.getElementById('draggable');
    rDrag.init(obj);
    }
    </script>
    </head>
    <body>
    <div id="draggable" class="draggable">可以移動喔！</a></div>
    </body>
    </html>

這樣寫可以移動 draggable 這個DIV

可是如果我想多的DIV 共用這個移動的程式...我不知該如何去修改

希望各位論壇站友可以幫助我

小弟本人是個剛接觸JS的大學生
收藏 分享

Mesak

Rank: 1

帖子
20 
主題
0 
精華
0 
積分
33 
威望
30  
金錢
1  
5#
發表於 2011-5-12 17:25 | 只看該作者
本帖最後由 Mesak 於 2011-5-12 17:26 編輯

http://jsfiddle.net/mesak/6FdUh/1/
var rDrag = {
    o: null,
    init: function (o) {
        if( typeof(o.length) == 'number' ){
            for(x in o){
                this.init(o[x]);
            }
        }else if( typeof(o) == 'object' ){
           o.onmousedown = this.start;         
        }
    },
    start: function (e) {
        var o;
        e = rDrag.fixEvent(e);
        e.preventDefault && e.preventDefault();
        rDrag.o = o = this;
        o.x = e.clientX - rDrag.o.offsetLeft;
        o.y = e.clientY - rDrag.o.offsetTop;
        document.onmousemove = rDrag.move;
        document.onmouseup = rDrag.end;
    },
    move: function (e) {
        e = rDrag.fixEvent(e);
        var oLeft, oTop;
        oLeft = e.clientX - rDrag.o.x;
        oTop = e.clientY - rDrag.o.y;
        rDrag.o.style.left = oLeft + 'px';
        rDrag.o.style.top = oTop + 'px';
    },
    end: function (e) {
        e = rDrag.fixEvent(e);
        rDrag.o = document.onmousemove = document.onmouseup = null;
    },
    fixEvent: function (e) {
        if (!e) {
            e = window.event;
            e.target = e.srcElement;
            e.layerX = e.offsetX;
            e.layerY = e.offsetY;
        }
        return e;
    }
}
    var obj = document.getElementById('draggable').getElementsByTagName('div');
    rDrag.init(obj);

<div id="draggable">
<div id="draggable1" class="draggable">可以移動喔！</a></div>
<div id="draggable2" class="draggable">可以移動喔！</a></div>
<div id="draggable3" class="draggable">可以移動喔！</a></div>
<div id="draggable4" class="draggable">可以移動喔！</a></div>
<div id="draggable5" class="draggable">可以移動喔！</a></div>
</div>
1

評分人數

  • wmh

http://mesak.tw

TOP

wmh

Rank: 9Rank: 9Rank: 9

帖子
763 
主題
210 
精華
2 
積分
232 
威望
232  
金錢
0  
4#
發表於 2011-5-6 20:06 | 只看該作者
你是指只用兩行程式，就讓多個 div 可以變 dragable 嗎？
目前看來 rDrag 並不支援這樣做，他只有一個變數 o 存放一個物件，
你得修改蠻多地方才能達到你要的效果。

倒是你自己可以再包一層，例如用 jQuery 來做，透過 class selector 一次選取多個 div，
再一個個套用 rDrag。
$(".draggable").each(function (i, obj) {
  rDrag.init(obj);
});
To infinity and beyond!

TOP

whiteazraellord

Rank: 1

帖子
2 
主題
1 
精華
0 
積分
4 
威望
1  
金錢
1  
3#
發表於 2011-5-6 00:27 | 只看該作者
這樣的方法我知道

可是我希望能讓 多個不同DIV 共用這段JS程式

TOP

wmh

Rank: 9Rank: 9Rank: 9

帖子
763 
主題
210 
精華
2 
積分
232 
威望
232  
金錢
0  
2#
發表於 2011-5-5 23:30 | 只看該作者
讓那個 div 可以被拖曳的程式在：
var obj = document.getElementById('draggable');
rDrag.init(obj);
所以只要複製不同 id 的 div，直接再多 copy 幾份上面的程式碼，修改一下就可以囉。

sample：
http://jsbin.com/evowu5
To infinity and beyond!

TOP

返回列表 回復 發帖