时间戳

首页 > 解决方案 > 如何更改在可排序 JQuery 中拖动的元素

javascript - 如何更改在可排序 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 的文档，我认为可以选择由 ui.item 拖入排序的项目，例如 $(ui.item) 我尝试了这些地方的示例选择语句：

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

我究竟做错了什么？

标签： javascriptjquery

解决方案

根据 jQuery UI 文档，句柄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>

推荐阅读