jquery实现拖动到固定区域

本来想用插件做，后来在网上搜到一个原码，下下来看了看，改动了一下就实现。下面把原码贴出来吧！

<html>
<head>
    <title>-----drag-----</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript'>
    var keyDown = false;//鼠标是否按下
    var start = new position();//要拖动物体开始的位置
    var end = new position();//鼠标释放时的位置
var table1p=new position();
    $(document).ready(function() {
   var offset=$('#box').offset();
   start.x = offset.left;
   start.y = offset.top;
   //alert(start.x+","+start.y);

   var offsettable=$("#table1").offset();
   table1.x = offsettable.left;
   table1.y = offsettable.top;
   //alert(table1.x+","+table1.y);

        $('#box').css({}).bind('mousedown', down); //绑定鼠标按下事件
        $(this).bind('mousemove', move).bind('mouseup', release);//页面绑定鼠标移动和释放事件
    });
    function down() {//鼠标按下
        keyDown = true;
    }
    function move() {//移动
        if(keyDown) {
            drag();
        }
        else if(end.x != undefined &&end.y != undefined) {
            end.x = end.y = undefined;

        }
        function stopX(x) {
            if(x < 0) x=-x;
            if(x > 986) x=2*986-x;
            return x;
        }
        function stopY(y) {
            if(y < 0) y=-y;
            if(y > 589) y=2*589 - y;
            return y;
        }
    }
    function drag() {//拖动
        var x = event.x-10;
        var y = event.y-10;//-10把鼠标放到box的中间
        stopOver(); //阻止越界
      $('#box').css({left: x,top:y});
        function stopOver() {
            if(x < 0) x=-x;
            if(x > 986) x=2*986-x;
            if(y < 0) y=-y;
            if(y > 589) y=2*589 - y;
        }
    }
    function release() {//鼠标释放
        keyDown = false;
        end.x = event.x;
        end.y = event.y;
   if((end.x-10)>=table1.x&&(end.x-10)<=(table1.x+100)&&(end.y-10)>=table1.y&&(end.y-10)<=(table1.y+300))
    dragto();
   else revert();
    }

function dragto(){
   $("#box").remove();
   $("#table1").append("<div id='newbox'></div>");
}

function revert(){
   $('#box').css({left: start.x,top:start.y});
}

    function position(x, y) {//坐标
        this.x = x;
        this.y = y;
    }
    </script>

<style type="text/css">
#box{
width:20px;
height:20px;
background:red;
position:absolute;
left:10px;
top:10px
}

.table{
width: 100px;
height:300px;
border: 1px solid #838383;
text-align: left;
}

#table1{
position:absolute;
top:10px;
left:150px;
}

#table1 #newbox{
width:20px;
height:20px;
background:red;
position:absolute;
}
</style>
</head>
<body>
<div id="table1" class="table"></div>
    <div id='box'></div>
</body>
</html

拖动到指定位置时要把元素的id改一下，这样才可以把元素固定。

posted @ 2009-01-12 09:55 小不点儿大的由我做主！阅读(842) 评论(0) 收藏举报

刷新页面返回顶部