Переместить выбранный параметр вверх или вниз - оставаться видимым больше не работает в IE11 или Edge? - PullRequest
Новая
       14

Переместить выбранный параметр вверх или вниз - оставаться видимым больше не работает в IE11 или Edge?

0 голосов
/ 22 июня 2019

Вот простой бит htm / jquery, который вы можете вырезать и вставить в блокнот и сохранить и запустить на рабочем столе: 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#moveup').click(function() {
  var opt = $('#sourceSelect option:selected');

  if(opt.is(':first-child')) {
    opt.insertAfter($('#sourceSelect option:last-child'));
  }
  else {
    opt.insertBefore(opt.prev());
  }
});
});

$(document).ready(function() {
$('#movedown').click(function() {

  var opt = $('#sourceSelect option:selected');

  if(opt.is(':last-child')) {
    opt.insertBefore($('#sourceSelect option:first-child'));
  }
  else {
    opt.insertAfter(opt.next());
  }
});
});
</script>
</head>
<body>
<select name="sourceSelect" id="sourceSelect" size="4">
  <option value="example1">Example1</option>
  <option value="example2">Example2</option>
  <option value="example3">Example3</option>
  <option value="example4">Example4</option>
  <option value="example5">Example5</option>
  <option value="example6">Example6</option>
  <option value="example7">Example7</option>
  <option value="example8">Example8</option>
  <option value="example9">Example9</option>
</select>

<input type="button" name="moveup" id="moveup" value="up" />
<input type="button" name="movedown" id="movedown" value="down" />
</body>
</html>

Выберите элемент, нажмите кнопку перемещения вверх или внизкнопка, и этот элемент будет ... ну, двигаться вверх или вниз!

Проблема в том, что в IE или Edge, как только вы достигнете дна или верха контейнера, он «переместится» из поля зрения.Контейнер не прокручивается.

Chrome, Firefox, Opera - все работает нормально.

Я пробовал несколько способов (в JQuery) перемещаться вверх / вниз.Я пробовал scrollIntoView и scrollTop's.Мне нужен какой-то способ сохранить предмет видимым.

Кто-нибудь сталкивался с этой проблемой?

1 Ответ

2 голосов
/ 22 июня 2019

Не хотел отмечать его как дубликат, потому что мне пришлось потратить некоторое время и найти этот ответ , который решает ваши проблемы с IE.Кроме того, у него не было голосов вообще ... 

var showSelected = function(selector) {
    var thisSelect = $(selector);
    var thisIndex = thisSelect.find(":selected").index();
    var lastPos = 0;
    thisSelect.children().each(function() {
        lastPos++;
    });
    var currScrollPos = (thisIndex / lastPos) * parseInt(thisSelect[0].scrollHeight);
    thisSelect.scrollTop(currScrollPos);
}

$('#moveup').click(function() {
    var opt = $('#sourceSelect option:selected');
    if (opt.is(':first-child')) {
        opt.insertAfter($('#sourceSelect option:last-child'));
    } else {
        opt.insertBefore(opt.prev());
    };
    showSelected("#sourceSelect");
});

$('#movedown').click(function() {
    var opt = $('#sourceSelect option:selected');
    if (opt.is(':last-child')) {
        opt.insertBefore($('#sourceSelect option:first-child'));
    } else {
        opt.insertAfter(opt.next())[0];
    };
    showSelected("#sourceSelect");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="sourceSelect" id="sourceSelect" size="4">
    <option value="example1">Example1</option>
    <option value="example2">Example2</option>
    <option value="example3">Example3</option>
    <option value="example4">Example4</option>
    <option value="example5">Example5</option>
    <option value="example6">Example6</option>
    <option value="example7">Example7</option>
    <option value="example8">Example8</option>
    <option value="example9">Example9</option>
</select>
<input type="button" name="moveup" id="moveup" value="up" />
<input type="button" name="movedown" id="movedown" value="down" />

Также на JSFiddle .

...