Как изменить элемент, перетаскиваемый в сортируемом JQuery

Я продолжаю получать ошибку: Uncaught TypeError: ui is undefined при запуске этого файла в браузере

Файл:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bla</title>
    <link rel="stylesheet" href="styles/jquery-ui.css">
    <style>
        #outer {
            /* position: relative; */
            width: 60%;
            height: 700px;
            background-color:cornflowerblue;
            text-align: center;
            margin: 0 auto;
        }

        li {
            /* position:relative; */
            margin: 0;
            padding: 0;
            background-color: pink;
        }
        .inner {
            /* position: relative; */
            margin: 0;
            padding: 0;
            background-color:darkgoldenrod;
            height: 5em;
        }
        #sortable {
            list-style-type: none;
        }
        p {
            margin: 0;
            padding: 0;
        }
        .tilt {
            background-color:lightslategrey;
            transform: rotate(5);
        }
    </style>
</head>
<body>
    <div id="outer">
        <ul id="sortable">
            <!-- <li> -->
                <div class="inner"><p>hello 1</p></div>
            <!-- </li> -->
            <li class="ui-state-default">
                <div class="inner"><p>hello 2</p></div>
            </li>
            <li class="ui-state-default">
                <div class="inner"><p>hello 2e</p></div>
            </li>
            <li class="ui-state-default">
                <div class="inner"><p>hello 4</p></div>
            </li>
        </ul>
    </div>

    <button id="lebutton">Save</button>
    


    <script src="scripts/jquerymin.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui.min.js"></script>   
    <script>
        $(function() {
            $('#sortable').sortable();
            $('#sortable').disableSelection();

            $('#lebutton').on('click', function(e) {
                e.preventDefault();
                let childrens = $('#sortable').children();
                childrens.each(function(index, elem) {
                    console.log(index + ": " + elem.textContent);
                });
            });
        });

        $('#sortable').sortable({
            handle: function(event, ui) {
                $(ui.item).addClass("tilt");
                console.log('handle')
            },
            stop: function(event, ui) {
                $(ui.item).removeClass("tilt");
                console.log('stop');
            },
        });
    </script>
</body>
</html>

Я прочитал документацию для пользовательского интерфейса JQuery и подумал, что можно выбрать элемент, который перетаскивается для сортировки с помощью ui.item, например $(ui.item). Я пробовал примеры операторов select из этих мест:

событие перетаскивания для jquery-ui-sortable

Добавить и удалить класс по клику с помощью jQuery?

jQuery Sortable - Как получить текущий атрибут перетаскиваемого элемента

$('#'+ui.item[0].id).removeClass("ui-state-default"); из этого ответа:

https://stackoverflow.com/a/1931019/7989121

и ui.helper.addClass('red'); из этого ответа:

https://stackoverflow.com/a/25018112/7989121

Что я делаю неправильно?


javascript jquery
person brat    schedule 08.10.2020    source источник
comment
ui не является параметром для обратного вызова handle. возможно, вы упомянули что-то еще, например sort   -  person Hagai Wild    schedule 08.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

Согласно документации пользовательского интерфейса jQuery дескриптор не является типом функции, поэтому вы не можете передать event и ui к нему.

Поправьте меня, если я ошибаюсь, но я предполагаю, что вы хотите добавить класс к выбираемому элементу (.tilt), а затем, когда элемент перетаскивается в новое положение, класс удаляется... верно?

  1. Удалите строку $("#sortable").sortable(), потому что вы вызываете это в другой функции
  2. Поместите другую сортируемую функцию в jQuery $(function()
  3. Изменить handle на activate
  4. Используйте ui.item для доступа к элементу.

$(function() {
 $('#sortable').sortable({
   activate: function(event, ui) {
     ui.item.addClass("tilt");
   },   
   stop: function(event, ui) {
     ui.item.removeClass("tilt");
   }
 });
 $('#sortable').disableSelection();

 $('#lebutton').on('click', function(e) {
    e.preventDefault();
    let childrens = $('#sortable').children();
    
    childrens.each(function(index, elem) {
      console.log(index + ": " + elem.textContent);
    });
  });
    
  
});
#outer {
  /* position: relative; */
  width: 60%;
  height: 700px;
  background-color:cornflowerblue;
  text-align: center;
  margin: 0 auto;
}

li {
  /* position:relative; */
  margin: 0;
  padding: 0;
  background-color: pink;
}
.inner {
  /* position: relative; */
  margin: 0;
  padding: 0;
  background-color:darkgoldenrod;
  height: 5em;
}
#sortable {
  list-style-type: none;
}
p {
  margin: 0;
  padding: 0;
}
.tilt {
  background-color:lightslategrey;
  transform: rotate(5) !important;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="outer">
    <ul id="sortable">
        <!-- <li> -->
            <div class="inner"><p>hello 1</p></div>
        <!-- </li> -->
        <li class="ui-state-default">
            <div class="inner"><p>hello 2</p></div>
        </li>
        <li class="ui-state-default">
            <div class="inner"><p>hello 2e</p></div>
        </li>
        <li class="ui-state-default">
            <div class="inner"><p>hello 4</p></div>
        </li>
    </ul>
</div>

<button id="lebutton">Save</button>

person Sanya    schedule 08.10.2020