jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化

標題: 多個DIV共用自由移動DIV的程式 [打印本頁]

作者: whiteazraellord 時間: 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的大學生

作者: wmh 時間: 2011-5-5 23:30

讓那個 div 可以被拖曳的程式在：

var obj = document.getElementById('draggable');
rDrag.init(obj);

所以只要複製不同 id 的 div，直接再多 copy 幾份上面的程式碼，修改一下就可以囉。

sample：
http://jsbin.com/evowu5

作者: whiteazraellord 時間: 2011-5-6 00:27

這樣的方法我知道

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

作者: wmh 時間: 2011-5-6 20:06

你是指只用兩行程式，就讓多個 div 可以變 dragable 嗎？
目前看來 rDrag 並不支援這樣做，他只有一個變數 o 存放一個物件，
你得修改蠻多地方才能達到你要的效果。

倒是你自己可以再包一層，例如用 jQuery 來做，透過 class selector 一次選取多個 div，
再一個個套用 rDrag。

$(".draggable").each(function (i, obj) {
  rDrag.init(obj);
});

作者: Mesak 時間: 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>

歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)