Sortable - connectWith не работает - lorem ipsum

$('.wrapca, .wrapcb').sortable({
  containment: "parent",
  connectWith: ".wrapca, .wrapcb",
  axis: "x",
  tolerance: "pointer"
});

.wrapca, .wrapcb{
	width:30%;
	display:inline-grid;
	grid-template-columns:repeat(2, 1fr);
	grid-gap:5px;
}

.inside{
cursor:cell;
background:gold;
}

<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.js"></script>

<div style = "text-align:justify; text-align-last:justify;">
<div class='wrap wrapca'>
<div class='inside'>lorem</div>
<div class='inside'>ipsum</div>
</div>

<div class='wrap wrapcb'>
<div class='inside'>lorem</div>
<div class='inside'>ipsum</div>
</div>
</div>

Почему здесь не работает connectWith?

jquery-ui

17.12.2018 19:27

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Ответы 1

A selector of other sortable elements that the items from this list should be connected to. This is a one-way relationship, if you want the items to be connected in both directions, the connectWith option must be set on both sortable elements.

$(function() {
  $('.wrap').sortable({
    containment: $(".wrap").parent(),
    connectWith: ".wrap",
    //axis: "x",
    tolerance: "pointer"
  });
});

.wrapca,
.wrapcb {
  width: 30%;
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px;
}

.inside {
  cursor: cell;
  background: gold;
}

<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.js"></script>

<div style = "text-align:justify; text-align-last:justify;">
  <div class='wrap wrapca'>
    <div class='inside'>lorem</div>
    <div class='inside'>ipsum</div>
  </div>

  <div class='wrap wrapcb'>
    <div class='inside'>lorem</div>
    <div class='inside'>ipsum</div>
  </div>
</div>

Я подозреваю, что вы были слишком агрессивны в своем коде. Кроме того, условия содержания были слишком строгими.

ваш фрагмент не работает должным образом. левая и правая пара не сортируются сами по себе

— 21.12.2018 21:05

@puerto Я могу отсортировать их по списку и перемещать из списка в список. Я не могу воспроизвести, не умея сортировать внутри себя.

— 21.12.2018 21:07

@puerto - это немного сложно сделать. Это связано с количеством доступных интервалов для идентификации over в каждом списке. Я бы подумал о добавлении отступов, но они работают должным образом.

— 21.12.2018 21:08

left lorem не может быть помещен после left `ipsum` и наоборот. И то же самое для правильной пары.

— 22.12.2018 17:01

17.12.2018 23:19