Question

我有一个div id是正确的，它在容器div里面我希望增加或减少我的右div。但是现在当我拖动增加宽度时它会减少。现在只有当我从左侧开始拖动时，宽度才会增加。我希望它从div的右端开始

＆＃13;

 var isResizing = false,
      lastDownX = 0;

        $(function () {
            var container = $('#container'),
                left = $('#left'),
                right = $('#right'),
                handle = $('#handle');

            handle.on('mousedown', function (e) {
                isResizing = true;
                lastDownX = e.clientX;
            });

            $(document).on('mousemove', function (e) {
                // we don't want to do anything if we aren't resizing.
                if (!isResizing) 
                    return;
        
                var offsetRight = container.width() - (e.clientX - container.offset().left);

                left.css('right', offsetRight);
                right.css('width', offsetRight);
            }).on('mouseup', function (e) {
                // stop resizing
                isResizing = false;
            });
        })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
  margin-top:25px;
  width:100%;
    /* Disable selection so it doesn't get annoying */
    /*-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;*/
}

 #right {
    /*position: absolute;*/
    right:100px ;
    top: 0;
    bottom: 0;
    width: 200px;
    background: blue;
    height:20px;
}
 #handle {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: w-resize;
}
</style>
    
</head>
<body>
    <div id="container">
        <!-- Left side -->
        
        <div id="right">
            <!-- Actual resize handle -->
            <div id="handle"></div> This is the right side's content!
        </div>
    </div>

＆＃13;

在拖动时调整div宽度无法正常工作

0 个答案: