jQuery UI Sortable Проблема с небольшими элементами во вложенных списках - PullRequest
Новая
       22

jQuery UI Sortable Проблема с небольшими элементами во вложенных списках

0 голосов
/ 03 февраля 2019

Я использую вложенные сортируемые элементы, и у каждого элемента есть верхний и нижний колонтитулы.

Я сталкиваюсь с проблемой при перетаскивании внутренних элементов во внешние списки.Особенно перетаскивание после последнего внешнего элемента не будет работать. Проблема возникает только при перетаскивании элемента в нижней части.Началось перетаскивание в верхней части.

Я обнаружил проблему и увидел, что она появляется только в маленьком нижнем колонтитуле (высота около 10 пикселей).Если я сделаю нижний колонтитул больше, это сработает.Но целевой дизайн действительно хочет 10px; -)

Я пробовал оба режима допуска, а также различные пользовательские функции сортировки, но все не работает лучше.Если я выберу «указатель» в режиме допуска, то даже обычное перетаскивание в подсписки больше не будет работать.

screenrecord Запись показывает сначала работу над захватом сверху и послеэто проблематичный момент при захвате снизу.

Есть ли обходной путь для этого или других пользовательских режимов допуска?Спасибо.

https://jsfiddle.net/zkyo2Lun/

$(function() {
	$('ul').sortable({
  	connectWith: 'ul',
  	//tolerance: 'pointer' //<-- does also not work as wanted
  });

});
	.item {
		margin-top: 5px;
		margin-bottom: 5px;
    border: 1px solid green;
	}
	
	.itemList {
		list-style: none;
		margin: 0px;
		padding: 0px;
    border: 1px solid red;
    min-height: 10px;
	}
	
	.itemSubList {
		padding-left: 15px;
	}
	
	.itemTitle, .itemFooter {
		color: #ffffff;
		background: #74b9ff;
		width: 280px;
		box-sizing: border-box;
		height: 30px;
		cursor: pointer;
	}
  
  .itemFooter {
    height: 10px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<ul class="itemList">
  <li class="item">
	  <div class="itemTitle">outer1</div>
	  <ul class="itemList itemSubList">
      <li class="item">
	      <div class="itemTitle">item1</div>
        <ul class="itemList itemSubList">
        </ul>
	      <div class="itemFooter"></div>
      </li>
      <li class="item">
	      <div class="itemTitle">item2 (Dragging here works)</div>
        <ul class="itemList itemSubList">
        </ul>
	      <div class="itemFooter">(Dragging here fails) ---SAMPLE---</div>
      </li>
    </ul>
	  <div class="itemFooter"></div>
  </li>
  <li class="item">
	  <div class="itemTitle">outer2</div>
	  <ul class="itemList itemSubList">
      <li class="item">
	      <div class="itemTitle">item3</div>
        <ul class="itemList itemSubList">
        </ul>
	      <div class="itemFooter"></div>
      </li>
      <li class="item">
	      <div class="itemTitle">item4</div>
        <ul class="itemList itemSubList">
        </ul>
	      <div class="itemFooter"></div>
      </li>
    </ul>
	  <div class="itemFooter"></div>
  </li>
</ul>
^- drag SAMPLE after outer2 as last item
...