zoukankan      html  css  js  c++  java
  • jQuery拖拽功能

    HTML:

    <div></div>

    CSS:

    *{
        padding: 0;
        margin: 0;
    }

    div{
         100px;
        height: 100px;
        background: #f00;
        cursor: pointer;
        position: absolute;
        left: 0;
        top: 0;
    }

    JS:

    $('div').mousedown(function(e) {
        // e.pageX
        var positionDiv = $(this).offset();
        var distenceX = e.pageX - positionDiv.left;
        var distenceY = e.pageY - positionDiv.top;
        //alert(distenceX)
        // alert(positionDiv.left);

        $(document).mousemove(function(e) {
            var x = e.pageX - distenceX;
            var y = e.pageY - distenceY;

            if (x < 0) {
                x = 0;
            } else if (x > $(document).width() - $('div').outerWidth(true)) {
                x = $(document).width() - $('div').outerWidth(true);
            }

            if (y < 0) {
                y = 0;
            } else if (y > $(document).height() - $('div').outerHeight(true)) {
                y = $(document).height() - $('div').outerHeight(true);
            }

            $('div').css({
                'left': x + 'px',
                'top': y + 'px'
            });
        });

        $(document).mouseup(function() {
            $(document).off('mousemove');
        });
    });

    效果网址:

    http://www.jq22.com/webqd1345

  • 相关阅读:
    Chaos网络库(一) 开篇介绍
    对Oracle中的表进行分区
    java socket编程
    SQL优化
    冒泡排序、选择排序和插入
    集合有趣的地方
    java中String s = new String("abc")创建了几个对象
    集合排序
    接口与抽象类的区别
    软件测试流程
  • 原文地址:https://www.cnblogs.com/0826sw/p/11915274.html
Copyright © 2011-2022 走看看