Dom-Drag

陈小兵

浏览: 141044 次
性别:
来自: 深圳

最近访客更多访客>>

zty461217

liuxiao723846

LinApex

pearonly1a1a

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

Dom-Drag

如果你想实现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：设置拖动的路径

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

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

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

         源代码

<script language="javascript" src="dom-drag.js"></script>

<img id="foo" src="p.gif" style="position:absolute; left:20px; top:20px;" />

<script language="javascript">
    Drag.init(document.getElementById("foo"));
</script>

<!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>

<!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">
    #thumb {
        position:absolute;
        height:50px;
        width:12px;
        background-color:#eee;
        border:1px outset #eee;
        }
</style>
</head>

<body>
<div id="thumb" style="left:25px; top:25px;"></div>

<script language="javascript">
    var aThumb = document.getElementById("thumb");
    Drag.init(aThumb, null, 25, 25, 25, 200);
</script>
</body>
</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>
<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>

''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，但如果三位老兄的位置重叠了呢，谁在上？谁在下？打架解决吗？肯定不行啦，大家都是文明人嘛！作者提供了一种能解决少数组件重叠的，谁主谁次的方法。

源代码：

<script language="javascript" src="dom-drag.js"></script>

<img id="p" src="p.gif" style="position:absolute; left:50px; bottom:20px;" />
<img id="g" src="g.gif" style="position:absolute; right:20px; bottom:100px;" />
<img id="b" src="b.gif" style="position:absolute; left:60px; top:20px;" />

<script language="javascript">
    Drag.init(document.getElementById("p"), null, null, null, null, null, false, true);
    Drag.init(document.getElementById("g"), null, null, null, null, null, true, true);
    Drag.init(document.getElementById("b"), null, null, null, null, null, false, false);
</script>

这个 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

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

源代码：

<script language="javascript" src="dom-drag.js"></script>

<img id="p" src="p.gif" style="position:absolute; left:20px; top:50px;" />

<script language="javascript">
    window.onload = function() {
        Drag.init(document.getElementById("p"), null, null, null, null, null, false, false, null, mySin);
    }
    function mySin(x) {
        return Math.round(Math.sin((x - 20) / 10) * 10) + 50;
    }
</script>

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">
<!--
#pbox {
        width:300px; height:300px;
        overflow:hidden;
    }
.opacity{filter: alpha(opacity=60)}
-->
</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 style="width:300px; height:300px; overflow:hidden; top:20px; left:20px;">
<img src="snare_pic_large-300.jpg" />

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

下面插入图片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>

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);
    }

分享到：

将HTML转化为Image | Servlet上传文件,commons-fileupload

2012-04-01 15:58
浏览 1217
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Dom-Drag

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Dom-Drag

评论

发表评论

相关推荐

Jquery使用AJAX同步处理数据的方法

Javascript 多浏览器兼容性问题及解决方案

Javascript常用函数及基本教程集合

setTimeout与setInterva

最近访客更多访客>>