拖拽原理

最新推荐文章于 2020-12-16 20:44:04 发布

原创最新推荐文章于 2020-12-16 20:44:04 发布 · 329 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #jQuery #JavaScript #UP #HTML #ViewUI

一直以来都认为拖拽是一件很神奇的事情，今天终于有机会了解一下它的原理，这只是一个简单的例子，还需要很多的优化、改进。

基本原理如下：

拖拽状态 = 0
鼠标在元素上按下的时候{
	拖拽状态 = 1
	记录下鼠标的x和y坐标
	记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
	如果拖拽状态是0就什么也不做。
	如果拖拽状态是1，那么
	元素y = 现在鼠标y - 原来鼠标y + 原来元素y
	元素x = 现在鼠标x - 原来鼠标x + 原来元素x
}
鼠标在任何时候放开的时候{
	拖拽状态 = 0
}

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Drag and Drop</title>
        <script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                var state = {
                    draging: false,
                    mouseX: 0,
                    mouseY: 0,
                    objX: 0,
                    objY: 0
                };
                $("div").bind("mousedown", state, down).bind("mousemove", state, move).mouseover(over);
                $(document).bind("mouseup", state, up);
            });
            
            //处理鼠标被按下事件
            function down(event){
                event.data.draging = true;
                event.data.mouseX = parseInt(event.clientX);
                event.data.mouseY = parseInt(event.clientY);
                event.data.objX = parseInt($(this).css("top"));
                event.data.objY = parseInt($(this).css("left"));
            }
            
            //处理鼠标移动事件
            function move(event){
                state = event.data;
                if (state.draging) {
                    $(this).css("top", event.clientY - state.mouseX + state.objY)
                    $(this).css("left", event.clientX - state.mouseY + state.objX)
                }
            }
            
            //处理鼠标被在拖拽元素上
            function over(event){
                $(this).css("cursor", "move")
            }
            
            //处理鼠标被放开事件
            function up(event){
                event.data.draging = false;
            }
        </script>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
                background-color: #999999;
                position: absolute;
                top: 0px;
                left: 0px;
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>
</html>