Я использовал пользовательский интерфейс JQuery для перетаскивания своих элементов, у меня есть несколько блоков (optin, product, uptell и т. Д.), Чтобы перетащить их в правую область, поле расширяется и показывает некоторые входные данные и метки, как показано на прикрепленном изображении.
Я выделил высоту 600 пикселей справа и сделал ее автоматической прокруткой, чтобы добавление дополнительных элементов отображалось в одном месте.
Но если перетащить элемент ниже 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>