Question

我已经使用JQuery UI拖动了我的元素，我有一些框（选择框，产品，装饰图案等）可以拖动到框展开的右侧区域，并显示一些输入和标签，如附件中的图像所示。

我在右侧设置了600px的高度，并使其自动滚动，以便在同一位置显示更多元素。

但是，如果将元素拖到600像素以下，则页面会向下滚动，离开该元素时，它不会添加到理想的位置，但不会完全滚动回到顶部，如下图所示。

它应该滚动回到顶部，现在我借助拖动元素将其滚动回到顶部。（再次抓住其中一个元素并将其拖动到顶部，然后滚动回到顶部）。

这是我的代码。

    $(document).ready(function () {
       
        $(".right-content").droppable({
            cursor: 'grab',
            accept: '#optin',
            stack: '.ui-draggable',
             drop: function (event, ui) {
               $('#dropArea').append("<div class='optin movable'><div class='col-sm-6 col-lg-4 module'><div class='module-box bg-info'><h2>Optin</h2><div class='form-horizontal'><div class='form-group'><label class='control-label col-xs-7' for='conversionrate'>Conversion Rate</label><div class='col-xs-5'><input name='ConverstionRate' class='form-control text-box single-line calculationText' id='ConversionRate' type='text' value='' data-val-required='The ConverstionRate field is required.' data-val-number='The field ConverstionRate must be a number.' data-val='true'></div></div><h4>Number Of Leads : <span id='numberOfLeads'></span></h4><h4>Cost Per Lead : <span id='costPerLead'></span></h4><h4>Advertising Cost : <span id='costOfAdvertising'></span></h4><h4>Net Profits : <span class='label' id='netProfit'></span></h4><h4>Net Profit Year 1 : <span class='label' id='year1'></span></h4><h4>Net Profit Year 2 : <span class='label' id='year2'></span></h4></div></div></div></div>");
             }
        });
        
        $('#optin').draggable({helper:'clone', cursor:'move', stack:'.ui-draggable' });
});

    .body-content,.container-fluid, .body-content > .row {
       padding: 0;
       margin: 0;
    }

    .margin-padding {
       margin: 80px 0 0 0;
    }

    body {
       padding-top: 50px;
       padding-bottom: 20px;
       overflow: hidden;
    }

    .module-box {
       height: 620px;
       padding: 20px;
       margin-top: 10px;
       margin-bottom: 10px;
     }

    .right-content {
       height: 520px;
       overflow-y: auto;
    }

    #draggableArea {
       padding: 25px 20px 50px 20px;
    }

    #dropArea {
       padding: 10px 20px 20px 20px;
       margin-bottom: 50px;
    }

    .margin-for-upersection {
       margin-top: 30px;
       margin-bottom: 20px;
    }

<head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.structure.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<div class="container-fluid body-content">
       <div class="row margin-padding">
          <div class="col-sm-4 col-md-3 col-lg-2">
            <ul id="draggableArea" class="list-unstyled">
              <li id="optin">
              <div id="optinDragDiv" class="bg-info" style="height:80px;">
        <h4 style="color:#333; text-align:center; padding:30px 20px;">Optin</h4>            
                </div>
            </li>
        </ul>
    </div>
    <div class="col-sm-8 col-md-9 col-lg-10">
        <div id="clicks" class="row margin-for-upersection">

            <div class="row">
                <div class="form-group">
                    <div class="col-xs-4">
                       <label for="TargetClicks">Targeted Clicks</label>
                       <input name="TargetedClicks" placeholder="Targeted CLicks" class="calculationText form-control text-box single-line" id="TargetedClicks" type="text" value="" >
                         
                    </div>
                    <div class="col-xs-4">
                        <label for="cost">Cost Per Click</label>
                        <input name="CostPerClick" placeholder="Cost Per Click" class="calculationText form-control text-box single-line" id="CostPerClick" type="text" value="">
                    </div>
                </div>
            </div>


        </div>

        <div id="dropArea" class="right-content row">
          <div class="row">
            </div>


          </div>

        </div>
     </div>
    </div>

拖动元素时如何滚动到顶部

0 个答案: