Как добиться прокрутки с помощью опций перетаскивания внутри таблицы с прикрепленным заголовком и прокрутки для тела
У меня есть таблица с липким заголовком и вертикальной прокруткой. Ниже приведено изображение для этого.
Внутри td у меня есть div, содержащий данные (объекты), Div можно перетаскивать, и они работают нормально. Проблема в том, что в таблице может быть более 50 строк, и пользователю разрешено перемещать данные из 1-й строки в последнюю строку путем перетаскивания. если мы перетащим данные вниз,
$('table td').on("dragover", function (event) {
event.preventDefault();
event.target.classList.add("highlight");
$('html, body').animate({scrollTop:event.target.offsetTop},50); /* i am trying to auto scroll up and down, it just some time scroll down, but never up*/
});
строки таблицы прокручиваются слишком быстро и рывком. Кроме того, если вы хотите переместить некоторые строки вверх, они никогда не поднимутся вверх.
Если после того, как вы опустите один из них, вы попытаетесь подняться вверх, Пейдж продолжит прокручивать вниз и никогда не позволит вам подняться вверх. Поэтому я хочу плавную прокрутку вверх и вниз с помощью jQuery (не используя перетаскиваемый и отбрасываемый пользовательский интерфейс jQuery, поскольку это не работает для меня) или ванильного сценария. Вот мой образец сценария
var index = 0;
var dragSrcEl = null;
var row = 1;
var lastDragOver = null;
$(document).ready(function() {
$('.event').on("dragstart", function(event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table td').on("drop", function(event) {
event.preventDefault();
if (event.type === 'drop') {
$('.highlight').removeClass('highlight');
var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
if ($(this).find('span').length === 0) {
de = $('#' + data).detach();
de.appendTo($(this));
}
}
});
$('table td').on("dragover", function(event) {
event.preventDefault();
event.target.classList.add("highlight");
$('html, body').animate({
scrollTop: event.target.offsetTop
}, 50); /* i am trying to auto scroll up and down, it just some time scroll down, but never up*/
});
$('table td').on("dragleave", function(event) {
event.preventDefault();
event.target.classList.remove("highlight");
});
});th {
border: 1px solid #acadb0;
font-weight: bold;
color: black;
font-size: 14px;
}
td {
border: 1px solid #ccc;
height: 45px;
/*min-width:150px;*/
}
.event:hover {
border: 1px solid #ccc;
border-style: dashed;
}
.highlight {
border: 1px solid yellow;
background-color: yellow;
}
.container .row:first {
left: -27px !important;
}
.col-md-12 {
padding-left: 0px !important;
}
#secondHeader {
padding: 10px 16px 0 16px;
background: #FFFFFF;
z-index: 999;
width: 100%;
border-top: 1px solid #ccc;
border-bottom: 1px solid #000;
}
#myTableDiv {
position: relative;
top: 26px;
}
#myTable thead th {
position: sticky;
top: 0px;
z-index: 200;
background: #fff;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding-left: 0px;
}<script src = "https://www.dev.enterpriseplus.tools/sw/assets/jqtree/jquery.min.js"></script>
<div data-ng-app = "LeadApp" class = "row" style = "">
<div id = "secondHeader" style = "padding-left:10px;top: 0px;position: fixed;">
Rearrange Objects Childs
</div>
<div id = "myTableDiv" style = "margin-right: -15px;">
<table id = "myTable" class = "table table-bordered" style = "border-collapse: separate;">
<thead style = "background-color: #f5f6f7; position: sticky; top: 0;">
<tr>
<th scope = "col">Class Type (Level 1)</th>
<th scope = "col">Stereotype (Level 2)</th>
<th scope = "col">Type (Level 3)</th>
<th scope = "col">Subtype (Level 4)</th>
<th scope = "col">Sub-subtype (Level 5)</th>
<th scope = "col">Sub-sub-subtype (Level 6)</th>
</tr>
</thead>
<tbody id = "tablebody">
<tr>
<td row = "1" column = "1" class = "dropable" ondrop = "drop(event)" ondragover = "allowDrop(event)">
<div draggable = "true" class = "event" id = "33494" style = "cursor: pointer;">mr 1</div>
</td>
<td row = "1" column = "2" class = "dropable"></td>
<td row = "1" column = "3" class = "dropable"></td>
<td row = "1" column = "4" class = "dropable"></td>
<td row = "1" column = "5" class = "dropable"></td>
<td row = "1" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "2" column = "1" class = "nodrop disable"></td>
<td row = "2" column = "2" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33496" style = "cursor: move;">mr 2</div>
</td>
<td row = "2" column = "3" class = "dropable"></td>
<td row = "2" column = "4" class = "dropable"></td>
<td row = "2" column = "5" class = "dropable"></td>
<td row = "2" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "3" column = "1" class = "nodrop disable"></td>
<td row = "3" column = "2" class = "dropable"></td>
<td row = "3" column = "3" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33495" style = "cursor: move;">mr 3</div>
</td>
<td row = "3" column = "4" class = "dropable"></td>
<td row = "3" column = "5" class = "dropable"></td>
<td row = "3" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "4" column = "1" class = "nodrop disable"></td>
<td row = "4" column = "2" class = "dropable"></td>
<td row = "4" column = "3" class = "dropable"></td>
<td row = "4" column = "4" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33498" style = "cursor: move;">mr 4</div>
</td>
<td row = "4" column = "5" class = "dropable">
</td>
<td row = "4" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "5" column = "1" class = "nodrop disable"></td>
<td row = "5" column = "2" class = "dropable">
</td>
<td row = "5" column = "3" class = "dropable"></td>
<td row = "5" column = "4" class = "dropable"></td>
<td row = "5" column = "5" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33499" style = "cursor: move;">mr 5</div>
</td>
<td row = "5" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "6" column = "1" class = "nodrop disable"></td>
<td row = "6" column = "2" class = "dropable"></td>
<td row = "6" column = "3" class = "dropable">
<div draggable = "true" class = "event" id = "33495" style = "cursor: move;">mr 3</div>
</td>
<td row = "6" column = "4" class = "dropable"></td>
<td row = "6" column = "5" class = "dropable"></td>
<td row = "6" column = "6" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33500" style = "cursor: move;">mr 6</div>
</td>
</tr>
<tr>
<td row = "7" column = "1" class = "nodrop disable"></td>
<td row = "7" column = "2" class = "dropable"></td>
<td row = "7" column = "3" class = "dropable"></td>
<td row = "7" column = "4" class = "dropable"></td>
<td row = "7" column = "5" class = "dropable"></td>
<td row = "7" column = "6" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33497" style = "cursor: move;">mr 2 (M yousaf)</div>
</td>
</tr>
<tr>
<td row = "8" column = "1" class = "nodrop disable"></td>
<td row = "8" column = "2" class = "dropable"></td>
<td row = "8" column = "3" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33501" style = "cursor: move;">mr 3.1</div>
</td>
<td row = "8" column = "4" class = "dropable"></td>
<td row = "8" column = "5" class = "dropable"></td>
<td row = "8" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "9" column = "1" class = "nodrop disable"></td>
<td row = "9" column = "2" class = "dropable"></td>
<td row = "9" column = "3" class = "dropable"></td>
<td row = "9" column = "4" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33502" style = "cursor: move;">mr 4.1</div>
</td>
<td row = "9" column = "5" class = "dropable"></td>
<td row = "9" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "10" column = "1" class = "nodrop disable"></td>
<td row = "10" column = "2" class = "dropable"></td>
<td row = "10" column = "3" class = "dropable"></td>
<td row = "10" column = "4" class = "dropable"></td>
<td row = "10" column = "5" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33503" style = "cursor: move;">mr 5.1</div>
</td>
<td row = "10" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "11" column = "1" class = "nodrop disable"></td>
<td row = "11" column = "2" class = "dropable"></td>
<td row = "11" column = "3" class = "dropable"></td>
<td row = "11" column = "4" class = "dropable"></td>
<td row = "11" column = "5" class = "dropable"></td>
<td row = "11" column = "6" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33504" style = "cursor: move;">mr 6.1</div>
</td>
</tr>
</tbody>
</table>
</div>
<div style = "padding-left:10px;padding-top: 20px;">
<button class = "btn btn-primary" onClick = "saveObjects()" tabindex = "0">
<i class = "fa fa-save"></i> Save Order
</button>
<span id = "message" style = "display:none"> <img src = "https://www.dev.enterpriseplus.tools/sw/../../images/ajax-loader.gif" style = "width:20px;" alt = "loading..."/></span>
</div>
</div>Я пробовал jQuery Ui Dragable и Dropable, но это не сохраняло данные внутри тега td таблицы, я могу переместить их в любое место страницы, что не является текущим требованием, а также это не работало с прокруткой: true для перетаскивания . Я пробовал много других вариантов и решений, но мне ничего не помогло. Мне нужен скрипт vanilla js. Я не эксперт во фронтенде
Пожалуйста, не перемещайте какой-либо элемент вниз, а затем пытайтесь прокрутить вверх с помощью мыши, полоса прокрутки продолжает трястись и остается внизу. Ссылка здесь. codepen.io/Qamar-Zamanch/pen/gOJaJVd
—
17.05.2024 14:03
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
71
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вы можете использовать CSS-сетку для управления макетом верхнего, таблицы и нижнего колонтитула, а также задавать таблице 1fr высоту. Теперь <thead> может быть прикрепленным, и с помощью overflow: scroll таблица будет прокручиваться, когда вы начнете перетаскивать элементы вверх или вниз по таблице.
var index = 0;
var dragSrcEl = null;
var row = 1;
var lastDragOver = null;
$(document).ready(function() {
$('.event').on("dragstart", function(event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table td').on("drop", function(event) {
event.preventDefault();
if (event.type === 'drop') {
$('.highlight').removeClass('highlight');
var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
if ($(this).find('span').length === 0) {
de = $('#' + data).detach();
de.appendTo($(this));
}
}
});
$('table td').on("dragover", function(event) {
event.preventDefault();
event.target.classList.add("highlight");
$('html, body').animate({
scrollTop: event.target.offsetTop
}, 50); /* i am trying to auto scroll up and down, it just some time scroll down, but never up*/
});
$('table td').on("dragleave", function(event) {
event.preventDefault();
event.target.classList.remove("highlight");
});
});body {
padding: 0;
margin: 0;
}
div.row {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
#secondHeader {
grid-column: 1;
grid-row: 1;
}
#myTableDiv {
grid-column: 1;
grid-row: 2;
overflow: scroll;
}
footer {
grid-column: 1;
grid-row: 3;
padding: .5em;
}
th {
border: 1px solid #acadb0;
font-weight: bold;
color: black;
font-size: 14px;
}
td {
border: 1px solid #ccc;
height: 45px;
/*min-width:150px;*/
}
.event:hover {
border: 1px solid #ccc;
border-style: dashed;
}
.highlight {
border: 1px solid yellow;
background-color: yellow;
}
.container .row:first {
left: -27px !important;
}
.col-md-12 {
padding-left: 0px !important;
}
#secondHeader {
padding: 10px 16px 0 16px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #000;
}
#myTable thead th {
position: sticky;
top: 0px;
z-index: 200;
background: #fff;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding-left: 0px;
}<script src = "https://www.dev.enterpriseplus.tools/sw/assets/jqtree/jquery.min.js"></script>
<div data-ng-app = "LeadApp" class = "row">
<div id = "secondHeader">
Rearrange Objects Childs
</div>
<div id = "myTableDiv">
<table id = "myTable" class = "table table-bordered" style = "border-collapse: separate;">
<thead style = "background-color: #f5f6f7; position: sticky;">
<tr>
<th scope = "col">Class Type (Level 1)</th>
<th scope = "col">Stereotype (Level 2)</th>
<th scope = "col">Type (Level 3)</th>
<th scope = "col">Subtype (Level 4)</th>
<th scope = "col">Sub-subtype (Level 5)</th>
<th scope = "col">Sub-sub-subtype (Level 6)</th>
</tr>
</thead>
<tbody id = "tablebody">
<tr>
<td row = "1" column = "1" class = "dropable" ondrop = "drop(event)" ondragover = "allowDrop(event)">
<div draggable = "true" class = "event" id = "33494" style = "cursor: pointer;">mr 1</div>
</td>
<td row = "1" column = "2" class = "dropable"></td>
<td row = "1" column = "3" class = "dropable"></td>
<td row = "1" column = "4" class = "dropable"></td>
<td row = "1" column = "5" class = "dropable"></td>
<td row = "1" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "2" column = "1" class = "nodrop disable"></td>
<td row = "2" column = "2" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33496" style = "cursor: move;">mr 2</div>
</td>
<td row = "2" column = "3" class = "dropable"></td>
<td row = "2" column = "4" class = "dropable"></td>
<td row = "2" column = "5" class = "dropable"></td>
<td row = "2" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "3" column = "1" class = "nodrop disable"></td>
<td row = "3" column = "2" class = "dropable"></td>
<td row = "3" column = "3" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33495" style = "cursor: move;">mr 3</div>
</td>
<td row = "3" column = "4" class = "dropable"></td>
<td row = "3" column = "5" class = "dropable"></td>
<td row = "3" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "4" column = "1" class = "nodrop disable"></td>
<td row = "4" column = "2" class = "dropable"></td>
<td row = "4" column = "3" class = "dropable"></td>
<td row = "4" column = "4" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33498" style = "cursor: move;">mr 4</div>
</td>
<td row = "4" column = "5" class = "dropable">
</td>
<td row = "4" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "5" column = "1" class = "nodrop disable"></td>
<td row = "5" column = "2" class = "dropable">
</td>
<td row = "5" column = "3" class = "dropable"></td>
<td row = "5" column = "4" class = "dropable"></td>
<td row = "5" column = "5" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33499" style = "cursor: move;">mr 5</div>
</td>
<td row = "5" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "6" column = "1" class = "nodrop disable"></td>
<td row = "6" column = "2" class = "dropable"></td>
<td row = "6" column = "3" class = "dropable">
<div draggable = "true" class = "event" id = "33495" style = "cursor: move;">mr 3</div>
</td>
<td row = "6" column = "4" class = "dropable"></td>
<td row = "6" column = "5" class = "dropable"></td>
<td row = "6" column = "6" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33500" style = "cursor: move;">mr 6</div>
</td>
</tr>
<tr>
<td row = "7" column = "1" class = "nodrop disable"></td>
<td row = "7" column = "2" class = "dropable"></td>
<td row = "7" column = "3" class = "dropable"></td>
<td row = "7" column = "4" class = "dropable"></td>
<td row = "7" column = "5" class = "dropable"></td>
<td row = "7" column = "6" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33497" style = "cursor: move;">mr 2 (M yousaf)</div>
</td>
</tr>
<tr>
<td row = "8" column = "1" class = "nodrop disable"></td>
<td row = "8" column = "2" class = "dropable"></td>
<td row = "8" column = "3" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33501" style = "cursor: move;">mr 3.1</div>
</td>
<td row = "8" column = "4" class = "dropable"></td>
<td row = "8" column = "5" class = "dropable"></td>
<td row = "8" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "9" column = "1" class = "nodrop disable"></td>
<td row = "9" column = "2" class = "dropable"></td>
<td row = "9" column = "3" class = "dropable"></td>
<td row = "9" column = "4" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33502" style = "cursor: move;">mr 4.1</div>
</td>
<td row = "9" column = "5" class = "dropable"></td>
<td row = "9" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "10" column = "1" class = "nodrop disable"></td>
<td row = "10" column = "2" class = "dropable"></td>
<td row = "10" column = "3" class = "dropable"></td>
<td row = "10" column = "4" class = "dropable"></td>
<td row = "10" column = "5" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33503" style = "cursor: move;">mr 5.1</div>
</td>
<td row = "10" column = "6" class = "dropable"></td>
</tr>
<tr>
<td row = "11" column = "1" class = "nodrop disable"></td>
<td row = "11" column = "2" class = "dropable"></td>
<td row = "11" column = "3" class = "dropable"></td>
<td row = "11" column = "4" class = "dropable"></td>
<td row = "11" column = "5" class = "dropable"></td>
<td row = "11" column = "6" class = "dropable" ondrop = "drop(this, event)" ondragover = "allowDrop(this, event)">
<div draggable = "true" class = "event" id = "33504" style = "cursor: move;">mr 6.1</div>
</td>
</tr>
</tbody>
</table>
</div>
<footer>
<button class = "btn btn-primary" onClick = "saveObjects()" tabindex = "0">
<i class = "fa fa-save"></i> Save Order
</button>
<span id = "message" style = "display: none;"> <img src = "https://www.dev.enterpriseplus.tools/sw/../../images/ajax-loader.gif" style = "width:20px;" alt = "loading..."/></span>
</footer>
</div>Другие вопросы по теме
Как я могу создать div, который занимает все доступное пространство, но не переполняется?
Изменение размера изображения с помощью видового экрана
Порядок управления при добавлении нескольких элементов в соединение d3
Проверьте, нажата ли кнопка с помощью оператора if в JS
HTML MKDocs меняет цвет и размер заголовка
Галерея изображений с использованием Magnific-popup всегда всплывает первой, а не той, которая выбрана при нажатии
Использование статических файлов с изображениями в Django 5
Html-поля в livewire не обновляют данные
Запретить прокрутку страницы, когда курсор наведен на элемент Blazor
Autodesk.DocumentBrowser в программе просмотра Forge/APS с локальным svf-файлом
Похожие вопросы
Исправьте или установите файл cookie в запросе jquery ajax
Получил тот же ответ от Firestore при получении данных с помощью startAfter
Как написать полифил для сортировки массива, используя метод сортировки слиянием
Порядок управления при добавлении нескольких элементов в соединение d3
Регулярное выражение не должно совпадать, если значение имеет точку
Почему этот код должен ожидать запятую?
Получение секретной строки из диспетчера секретов с помощью nodejs
Проверьте, нажата ли кнопка с помощью оператора if в JS
Загрузите эскиз холста p5.js в формате PDF с помощью jsPDF addImage JPEG
Путь API с использованием экспресс-маршрутизатора в nodejs
можете ли вы создать для этого код?