CODEWITHSUNDEEP
javascriptjquery
brat
brat

Reputation: 584

How to change element dragged in sortable JQuery

I keep getting the Error: Uncaught TypeError: ui is undefined when running this file in browser

File:

<!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>

I read the documentation for JQuery UI, and I thought one could select the item that is dragged in sortable by ui.item like $(ui.item) I tried the example select statements from these places:

drag event for jquery-ui-sortable

Add and remove a class on click using jQuery?

jQuery Sortable - How to get current dragged element attribute

$('#'+ui.item[0].id).removeClass("ui-state-default"); from this answer:

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

and ui.helper.addClass('red'); from this answer:

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

What am I doing wrong?

Upvotes: 0

Views: 587

Answers (1)

Sanya
Sanya

Reputation: 1280

According to the jQuery UI documentation handle is not a function type, so you cannot pass event and ui to it.

Correct me if I'm wrong but I assume you want to add a class to the item that is being selected (.tilt) and then when the item is dropped in its new position, the class is removed...correct?

  1. Remove the $("#sortable").sortable() line because you are calling this in the other function
  2. Put your other "sortable" function inside the jQuery $(function()
  3. Change handle to activate
  4. Use ui.item to access the element.

$(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>

Upvotes: 1

Related Questions