Skip to content
Related Articles
Open in App
Not now

Related Articles

jQuery UI Sortable appendTo Option

Improve Article
Save Article
  • Last Updated : 01 Dec, 2021
Improve Article
Save Article

The Sortable widget appendTo option is used to append the elements when the sortable elements are dragged with mouse.


$( ".selector" ).sortable({
  appendTo: document.body

Approach: First, add jQuery UI scripts needed for your project.

<link rel=”stylesheet” href=”//”>

<script src=””></script>

<script src=””></script>



<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src=""></script>
    <script src=""></script>
        #sortable {
            list-style-type: none;
            width: 50%;
        #sortable li {
            margin: 10px 0;
            padding: 0.5em;
            font-size: 25px;
            height: 20px;
        $(function () {
                appendTo: document.body
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h4>jQuery UI Sortable Widget appendTo Option</h4>
        <ul id="sortable">
            <li class="ui-state-default">BCD</li>
            <li class="ui-state-default">CAB</li>
            <li class="ui-state-default">BAC</li>
            <li class="ui-state-default">BCA</li>
            <li class="ui-state-default">ABC</li>


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!