Dom-Drag学习

来源：互联网发布：见一微而知始末编辑：程序博客网时间：2024/05/12 17:03

本文属于转帖：原文地址为：http://blog.csdn.net/kukufly/archive/2009/02/19/3910335.aspx

如果你想实现Web上的组件能用鼠标随意拖动到页面的任意位置或指定的位置等，那你就要看看dom-drag.js了。dom-drag.js可以从http://youngpup.net/projects/dom-drag/下载到，作者 Aaron Boodman。

其作者称其为面向现代DHTML浏览器的轻量级、易于使用的拖放API。事实上DOM-Drag库是做到了。

你想让某个组件能够拖动，你可以调用 Drag.init( ) 方法。

init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)

o ：是想现实鼠标拖动的组件；

oRoot ：是o上层的组件，将随o一起拖动；

minX, maxX, minY, maxY ：设置鼠标拖动的范围，由下面的例子cropper可以看出，如果有oRoot,那范围是由oRoot相对于页面来说的；

bSwapHorzRef, bSwapVertRef ：设置组件的优先权；

fXMapper, fYMapper：设置拖动的路径

作者给了几个简单例子说明Drag.init()的使用，每个例子都是简单易懂的。

例子1：http://youngpup.net/projects/dom-drag/ex1.html

这个例子实现了一张图片在页面中用鼠标随意的拖动

源代码

上面这段代码使id为foo的图片实现了能鼠标拖动的功能，Drag.init(o,其他参数)，如果使用Drag.init(o)其他参数将使用默认值，null或true，但注意不能Drag.init(o,minX)，中间的参数是不能漏掉的。

style="position:absolute; left:20px; top:20px;"

注意：组件的位置必需设置为absolute或relative 和初始化开始的位置，就像上面的代码一样，Drag.init()方法必需是在组件被读取了之后才能调用。

例子2：http://youngpup.net/projects/dom-drag/ex2.html

这个例子实现了通过子组件实现子父组件的拖动

源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<html>
<head>
<script language="javascript" src="dom-drag.js"></script>
<style type="text/css">
    #root {
        position:absolute;
        height:100px;
        width:150px;
        background-color:#F4F4F4;
        border:1px solid #333;
        }

    #handle {
        margin:2px;
        padding:2px;
        width:142px;
        color:white;
        background-color:navy;
        font-family:verdana, sans-serif;
        font-size:10px;
        }
</style>
</head>

<body>
<div id="root" style="left:20px; top:20px;">
    <div id="handle">Handle</div>
</div>

<script language="javascript">
    var theHandle = document.getElementById("handle");
    var theRoot   = document.getElementById("root");
    Drag.init(theHandle, theRoot);
</script>
</body>
</html>

通过对子组件"handle"的拖动，实现对父组件"root"的拖动，注意是子组件"handle"放在前面，同时注意position:absolute;的位置

例子3: http://youngpup.net/projects/dom-drag/ex3.html

这个例子实现了对组件拖动范围的限制

源代码

这里的minX, maxX, minY, maxY分别为25，25，25，200。X都是25，Y是从25到200，那就是说组件只能在Y轴上25到200的范围移动了。如果这4个属性设置为null，那就是说为null的属性是没有限制的了，如果4个都为null就是表示组件在页面上的拖动是没有限制的。

例子4：http://youngpup.net/projects/dom-drag/ex4.html

这个例子是前面3个例子的结合，这也是个实用的例子,这个例子用到了ypSimpleScrollC.js。

源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<html>
<head>
<script language="javascript" src="dom-drag.js"></script>
<script language="javascript" src="ypSimpleScrollC.js"></script>
<style type="text/css">
    #root {
        position:absolute;
        height:100px;
        width:150px;
        background-color:#F4F4F4;
        border:1px solid #333;
        font-family:verdana, sans-serif;
        font-size:10px;
        }

    #handle {
        margin:2px;
        padding:2px;
        width:142px;
        color:white;
        background-color:navy;
        cursor:default;
        }

    #thumb {
        position:absolute;
        height:25px;
        width:11px;
        background-color:#eee;
        border:1px outset #eee;
        }

    p {
        margin-top:0px;
        margin-bottom:1em;
        }
</style>

<script language="javascript">
    var theHandle, theRoot, theThumb, theScroll;
    var thumbTravel, ratio;

    theScroll = new ypSimpleScroll("scroll", 2, 19, 128, 75);

    window.onload = function() {
        theHandle = document.getElementById("handle");
        theRoot   = document.getElementById("root");
        theThumb  = document.getElementById("thumb");

        theScroll.load();

        Drag.init(theHandle, theRoot);
        Drag.init(theThumb, null, 135, 135, 19, 71);

        // the number of pixels the thumb can travel vertically (max - min)
        thumbTravel = theThumb.maxY - theThumb.minY;

        // the ratio between scroller movement and thumbMovement
        ratio = theScroll.scrollH / thumbTravel;

        theThumb.onDrag = function(x, y) {
            theScroll.jumpTo(null, Math.round((y - theThumb.minY) * ratio));
        }

    }
</script>

</head>

<body>
<div id="root" style="left:20px; top:20px;">
    <div id="handle">Handle</div>
    <div id="thumb" style="left:135px; top:19px;"></div>
    <div id="scrollContainer">
        <div id="scrollContent">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
        </div>
    </div>
</div>

</body>
</html>

function ypSimpleScroll(id, left, top, width, height, speed, contentWidth, initLeft, initTop)

theScroll = new ypSimpleScroll("scroll", 2, 19, 128, 75);

''scroll" 我怎么找不到id为scroll的组件，不用急，看看ypSimpleScrollC.js，原来这个是设置

id="scrollContainer"
id="scrollContent"

的样式啊，在命名上id + Container , id + Content，id可以改其他的，但后面的是固定的。

然后调用theScroll.load()方法

// the number of pixels the thumb can travel vertically (max - min)
thumbTravel = theThumb.maxY - theThumb.minY;

thumbTravel 是 theThumb在X轴能活动的像素。

// the ratio between scroller movement and thumbMovement
ratio = theScroll.scrollH / thumbTravel;

ratio是正文的高度跟垂直滚动条的滚动范围的比例

theThumb.onDrag = function(x, y) {
theScroll.jumpTo(null, Math.round((y - theThumb.minY) * ratio));
}
调用theThumb的onDrag事件，使正文跟滚动条以相同的比例滚动，实现同步。

例子5：http://youngpup.net/projects/dom-drag/ex5.html

这个例子有3个在页面中可以任意拖动的图片A、B、C，但如果三位老兄的位置重叠了呢，谁在上？谁在下？打架解决吗？肯定不行啦，大家都是文明人嘛！作者提供了一种能解决少数组件重叠的，谁主谁次的方法。

源代码：

这个 g 是在最上层的， p 是在中间层的， b 是在最下层的。

Drag.init(document.getElementById("p"), null, null, null, null, null, false, true);

Drag.init(.....,false,true);后面两个参数决定了组件在重叠时的地位。

最高的当然是true,true啦，最低的是false,false。理论上是有4种组合的

true,true->true,false->false,ture->false,false 。

如果你有太多要拖动的组件啦，那没办法啦，你自己可以试试改写js中的代码，让其能支持更多，9或16或更多。

例子6: http://youngpup.net/projects/dom-drag/ex6.html

这个例子中，图片的拖动是随着一定的路径，不是原先的可以随意拖动了

源代码：

Drag.init(document.getElementById("p"), null, null, null, null, null, false, false, null, mySin);

看到最后2个参数了吗？倒数第二个是设置x轴上的路径的，最后一个是设置y轴上的路径的。倒数第二个参数设置为null表示在x轴上的路径是随意的，y轴则是沿着正弦路径。

例子cropper：http://youngpup.net/projects/dom-drag/cropper.html

这个例子是在一张图片上实现部分清晰显示效果。

源代码：

<html>
<head>
<title> - cropper - </title>
<style type="text/css">

</style>
<script language="javascript" src="dom-drag.js"></script>
<script language="javascript">
    var oThang, oHandle, reportBox, iReportCount = 0;

    window.onload = function() {
        if (document.all || document.getElementById)
        {
            oThang = document.all ? document.all["thang"] : document.getElementById("thang")
            oHandle = document.all ? document.all["handle"] : document.getElementById("handle")
            oReport = document.all ? document.all["report"] : document.getElementById("report")

            Drag.init(oHandle, oThang, -250, -50, -250, -50);

            // report stuff
            oThang.onDrag = function(x, y) { reportDrag("", x, y); }
        }

        function reportDrag(who, x, y) {
            oReport.value = who + "" + " X = " + (x + 250) + " Y = " + (y + 250) + " W = 100 H = 100"
        }

        oThang.onDrag(-250, -250);
    }
</script>
</head>

<body>

<div style="width:300px; height:300px; overflow:hidden; top:20px; left:20px;">
    <img src="snare_pic_large-300.jpg" />
    <div id="thang" style="position:absolute; left:-250px; top:-250px;">
        <img class="opacity" style="position:absolute; left:0px; top:0px;" src="selection2.gif" />
        <img id="handle" style="position:absolute; left:250px; top:250px; width:100px; height:100px;" src="x.gif" />
    </div>
</div>

<input type="text" id="report" style="width:300px;" />

</body>
</html>

这里面有3张图片，一张是像素是300*300的snare_pic_large-300.jpg，一张是像素为600*600中间有个100*100空洞的selection.gif（这个我搞了半天才知道原来是中间破个洞－－#！！），最后一张是张空白图片的x.gif，其实就是利用把空图片放在selection.gif的空洞的位置，然后同过空图片带动selection.gif。

这个<div>是父div，里面设置了宽度跟高度方便为300px，overflow : hidden 的作用是如果放进来的比如图片的像素超过300*300，超过部分将被隐藏，这个div放在top 20，left 20的地方。

下面插入图片snare_pic_large-300.jpg。

id为thang的<div>是上面的<div>的子div，注意设置thang的top，left的位置是相对于父<div> 的，为了把空洞放在父<div>的左上角，thang的left -250，top -250，图片selection.gif放在0，0位置，这是相对于thang的，x.gif设置成跟空洞愿意的宽度跟高度，放在250，250位置，这也是相对于thang的。

//页面加载是初始化组件

window.onload = function() {
        if (document.all || document.getElementById)
        {
            oThang = document.all ? document.all["thang"] : document.getElementById("thang")
            oHandle = document.all ? document.all["handle"] : document.getElementById("handle")
            oReport = document.all ? document.all["report"] : document.getElementById("report")
            //拖动范围相对于父组件oTHang，空洞能移动的范围是300-100＝200，x＝minX＋200＝-50，y也一样
            Drag.init(oHandle, oThang, -250, -50, -250, -50);

            // 当oThang被拖动时调用函数reportDrag()在下面的input那里报位置
            oThang.onDrag = function(x, y) { reportDrag("", x, y); }

           //一些比较有用的方法还有onDragStart（x,y），开始拖动时调用，onDragEnd（x,y），结束拖动时调用
        }

        function reportDrag(who, x, y) {

            //实际位置应该还要在+20像素
            oReport.value = who + "" + " X = " + (x + 250) + " Y = " + (y + 250) + " W = 100 H = 100"
        }
        //初始化oThang的位置到-250，-250
        oThang.onDrag(-250, -250);
    }

最后一个例子：http://youngpup.net/projects/dom-drag/demo.html

这个例子中有三张图片，其中的一张被限制了移动的范围，而其余的两张没有被限制移动的范围，而且在移动的同时可以的到图片的当前坐标以及开始移动与结束移动的坐标。

源代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>

<head>

<!--

@import "/_common/demo.css";

body { margin:0px; }

#b {

cursor:move;

}

#g {

cursor:hand;

cursor:pointer;

}

#pbox {

position:absolute;

left:20px; top:20px;

width:300px; height:275px;

border:1px dashed #333399;

}

-->

</style>

var reportBox, iReportCount = 0;

window.onload = function() {

if (document.all || document.getElementById)

{

var oB = document.all ? document.all["b"] : document.getElementById("b")

var oG = document.all ? document.all["g"] : document.getElementById("g")

var oP = document.all ? document.all["p"] : document.getElementById("p")

reportBox = document.all ? document.all["oReport"] : document.getElementById("oReport")

reportBox2 = document.all ? document.all["oReport2"] : document.getElementById("oReport2")

Drag.init(oB);

Drag.init(oG);

Drag.init(oP, null, 0, 274, 0, 249);

// report stuff

oB.onDragStart = function(x, y) { reportDragStart("black", x, y); }

oG.onDragStart = function(x, y) { reportDragStart("green", x, y); }

oP.onDragStart = function(x, y) { reportDragStart("purple", x, y); }

oB.onDragEnd = function(x, y) { reportDragEnd("black", x, y); }

oG.onDragEnd = function(x, y) { reportDragEnd("green", x, y); }

oP.onDragEnd = function(x, y) { reportDragEnd("purple", x, y); }

oB.onDrag = function(x, y) { reportDrag("black", x, y); }

oG.onDrag = function(x, y) { reportDrag("green", x, y); }

oP.onDrag = function(x, y) { reportDrag("purple", x, y); }

}

function reportDragStart(who, x, y) {

reportBox.value += who + " | onDragStart " + " (" + x + "," + y + ")/n"

}

function reportDragEnd(who, x, y) {

reportBox.value += who + " | onDragEnd " + " (" + x + "," + y + ")/n"

}

function reportDrag(who, x, y) {

reportBox2.value = who + " | onDrag " + " (" + x + "," + y + ")"

}

</script>

</head>

<body>

</div>

</body>

</html>

在这个例子中，函数onDragStart，onDragEnd，onDrag这些都是dom-drag.js中已经定义好的事件处理器，分别得到元素开始拖动，结束拖动，正在拖动的坐标的值，作者把这些值直接显示了出来。