Div background and text leftside

Hi need some help please, I’m using jquery sortable, and I want to have div background and have text on left side so that I can sort the li’s on the right side. I want to achieve like this

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Sortable - Default functionality</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>

        #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #sortable li{
            margin: 0 3px 3px 3px;
            font-size: 1.4em;
            height: 35px;
        }
        #sortable{
            width:100%;
            min-width: 400px;
        }
        #lefttext { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #lefttext li{
            margin: 0 3px 3px 3px;
            font-size: 1.4em;
            height: 35px;
        }
        #lefttext{
            width:100%;
            min-width: 400px;
        }

    </style>

</head>
<body>
   <div class="container mt-5">
        <div class="row">
            <div class="card card-default" style="width: 100%;">
                  <div class="card-body">
                      <div class="row">
                          <div class="col-md-6">
                              <ul id="lefttext">
                                  <li>John Resig</li>
                                  <li>Learn Ui and Ux design</li>
                                  <li>Brendan Eich</li>
                              </ul>
                          </div>
                          <div class="col-md-6">
                              <ul id="sortable">
                                  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>John Resig</li>
                                  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Learn Ui and Ux design</li>
                                  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Brendan Eich</li>
                              </ul>
                          </div>
                      </div>

                  </div>

            </div>
        </div>
    </div>




<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $( function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    } );
</script>


</body>
</html>

Here is my output, I don’t know if I’m doing right, I don’t know how to apply background on div that will look like a row, just like my example above.

It looks to me like the text on the left relates to the text on the right.
If that is the case, this should be reflected structurally in the mark-up, with the left and right item for each row sharing a common parent element.
This would probably make this arrangement easier too.

I think I achieve the markup, but the only problem is when I sort, the whole row will move.

but I noticed the button is not aligned as you can see on the right side

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Sortable - Default functionality</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>

        #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #sortable li{
            margin: 0 3px 3px 3px;
            font-size: 1.4em;
            height: 35px;
        }
        #sortable{
            width:100%;
            min-width: 400px;
        }
        #lefttext { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #lefttext li{
            margin: 0 3px 3px 3px;
            font-size: 1.4em;
            height: 35px;
        }
        #lefttext{
            width:100%;
            min-width: 400px;
        }
        .bg.ui-sortable-handle {
            background: red;
            padding: 10px;
            margin-bottom: 8px;
        }
        .parentdiv {
            width: 100%;
            border: solid 1px red;
            margin-bottom: 10px;
            overflow: hidden;
            padding:8px;
        }
    </style>

</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="card card-default" style="width: 100%;">
                  <div class="card-body">
                      <div class="row">

                          <div class="col-md-12">

                              <ul id="sortable">
                                  <div class="parentdiv">
                                      <div class="float-left">
                                          <li>He want's to know web designing</li>
                                      </div>
                                      <div class="float-right handle">
                                          <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>John Resig</li>
                                      </div>
                                  </div>

                                  <div class="parentdiv">
                                      <div class="float-left">
                                          <li>Is an american software engineer</li>
                                      </div>
                                      <div class="float-right handle">
                                          <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Learn Ui and Ux design</li>
                                      </div>
                                  </div>

                                  <div class="parentdiv">
                                      <div class="float-left">
                                          <li>Javascript creator</li>
                                      </div>
                                      <div class="float-right handle">
                                          <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Brendan Eich</li>

                                      </div>
                                  </div>

                              </ul>

                          </div>
                      </div>

                  </div>

            </div>
        </div>
    </div>




<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $( function() {
        $( "#sortable" ).sortable({
            handle: ".handle"
        });
        $( "#sortable" ).disableSelection();
    } );
</script>


</body>
</html>

Unless you can reprogram the sortable elements in JS so that they can be split from each other I don’t see an easy way to do this.

Probably the easiest option is to fake it using your first example but it is a bit rigid and you can’t let the text wrap to another line.

I don’t know enough about ui.sortable to know whether the sortable items can be split over various rows so can’t really offer anything better.

1 Like

Thank you so much, Paul, I’m fine with this :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.