码迷,mamicode.com
首页 > 其他好文 > 详细

jq 拖拽

时间:2015-02-28 01:34:23      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
    background:pink;
    height:100px;
    width:100px;
    position:absolute;
    }
</style>
<script type="text/javascript" src="jquery-1.11.2.js" ></script>
<script>
    $(function ()
    {
        var disX = 0;
        var disY = 0;
        $(‘div‘).mousedown(function (ev)
        {
            disX = ev.pageX - $(this).offset().left;
            disY = ev.pageY - $(this).offset().top;
            $(document).mouseover(function (ev)
            {
                $(‘div‘).css(‘left‘,ev.pageX - disX);
                $(‘div‘).css(‘top‘,ev.pageY - disY);
            })
            
            $(document).mouseup(function ()
            {
                $(document).off();
            })
        })
    })
</script>
</head>

<body>
<div></div>
</body>
</html>

 

jq 拖拽

标签:

原文地址:http://www.cnblogs.com/mayufo/p/4304595.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!