How to Implement Horizontal Sorting with jQuery Using Various HTML Elements

Here is the current setup I have: http://www.bootply.com/sfLr2AJ7EU

The issue I am facing is with moving the image (id) boxes horizontally. While I have managed to make it work vertically, attempting to do so horizontally has been unsuccessful. The image can be moved, but dropping it in place is challenging. Additionally, when picking up the image with the mouse, it is grabbed about 6 CM away from the cursor.

Below are the jQuery and CSS code:

   $(function () {
        $("#sortable").sortable({
            revert: true
        }); 
    });
ul.thumbnails {
  overflow: auto;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  padding: 0px;
  margin: 0px; }
  ul.thumbnails ul {
    overflow: auto;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding: 0px;
    margin: 0px; }
  ul.thumbnails li.group_title {
    float: none; }
  ul.thumbnails li {
    margin: 0px 12px 12px 0px;
    float: left; }
    ul.thumbnails li .thumbnail {
      padding: 6px;
      border: 1px solid #dddddd;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none; }
      ul.thumbnails li .thumbnail img {
        -webkit-user-drag: none; }
    ul.thumbnails li .thumbnail.selected {
      background: #0088cc; }

And here is the HTML code:

<ul id="sortable" class="thumbnails">
    <id id="output0">
        <li>
            <div class="thumbnail selected">
                <img class="img-responsive" src="http://placehold.it/52&amp;text=1" width="52" height="52">
            </div>
        </li>
    </id>
    <id id="output1">
        <li>
            <div class="thumbnail">
                <img class="img-responsive" src="http://placehold.it/52&amp;text=2" width="52" height="52">
            </div>
        </li>
    </id>
    <id id="output2">
        <li>
            <div class="thumbnail">
                <img class="img-responsive" src="http://placehold.it/52&amp;text=3" width="52" height="52">
            </div>
        </li>
    </id>
    <id id="output3">
        <li>
            <div class="thumbnail">
                <img class="img-responsive" src="http://placehold.it/52&amp;text=4" width="52" height="52">
            </div>
        </li>
    </id>
</ul>

Answer №1

Hey there! I believe this is the adjustment you were referring to. Give this a shot instead:

ul.gallery li {
    margin: 0px 12px 12px 0px;
    float: left; 
}

replace it with

ul.gallery id {
    margin: 0px 12px 12px 0px;
    float: left;
}

Check out the solution on this link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The image momentarily pauses as the arrow keys are switched

I have a query regarding the movement of the main player image. While it generally moves smoothly Left or Right, there is an issue when quickly switching directions from right to left. When the left key is pressed while the right key is still held down, th ...

Challenges with basic contact form

Apologies in advance for any beginner mistakes, as I am venturing into creating an HTML/PHP contact form for the first time. Despite researching similar problems faced by others, I have not come across a solution. The main issue is that the email is not b ...

Using a comma as a decimal separator for input is not permitted when working with angular/typescript/html

I am facing an issue with my Angular frontend where I have numerous html input fields that trigger calculations upon typing. <input type="text" [(ngModel)]="myModel.myAttribute" (input)="calculate()"> The problem arise ...

Unable to execute jQuery function from JavaScript

I have been researching this issue and while I found similar posts, none of the solutions seem to work for me. My situation is slightly different. Within my code, I have a javascript function called addFormField that creates a dynamic input element within ...

Is there a way to determine which 'a href' link was selected on the previous webpage?

Being relatively new here, I have often visited Stack Overflow to find answers to questions that I have, only to discover that most of them have already been asked before (heh). However, I am facing a dilemma now. I have a homepage with two div elements ...

Convert an HTML file to .msg format or prevent the send button from functioning in Outlook messages

I am trying to figure out how to save an HTML file as a .msg format in order to send it later. The HTML is basically a mock of a regular email with just the basic features like from, to, cc, subject, and body. I'm not quite sure how to go about achiev ...

PHPMailer issue with rendering HTML in email body

Our email system utilizes PHPMailer to format emails, but when the emails are sent and opened in email clients like Gmail and Yahoo, they display as text instead of HTML. We have tested different email clients, such as Outlook, which allows us to attach a ...

What is the method for incorporating opacity into the background color CSS attribute using a Fluent UI color?

Currently, my challenge involves applying opacity to a background color sourced from the fluent UI library, which utilizes Design Tokens. Typically, I would add opacity to a background color like this: background-color: "rgba(255, 255, 255, 0.5)" However ...

Trouble displaying background image in Electron Application

When I try to load an image file in the same directory as my login.vue component (where the following code is located), it won't display: <div background="benjamin-child-17946.jpg" class="login" style="height:100%;"> A 404 error is popping up: ...

Every now and then, Ajax gets stuck

My website uses this code to request new chat messages and display them, but I've been running into an issue where it freezes at times and stops fetching new messages. (function worker() { $.ajax({ url: '/client_message.php?get_messa ...

Implement the maskmoney library in your input fields

In the form below, I am automatically adding inputs using a JavaScript function like this: $('.Preco1').maskMoney({ decimal: '.', thousands: ' ', precision: 2 }); $('.Preco1').focus(); $('#sub').maskMon ...

What is the best way to access all of the "a" elements contained within this specific div?

Chrome websites are built using the following structure: <div class="divClass"> <a class="aClass"></a> <a class="aClass"></a> <a class="aClass"></a> </div> Utili ...

Utilize Jquery to transmit a list

Here is some code I am working with: $("#allphotos").click(function () { $("<div></div>") .addClass("dialog") .appendTo("body") .dialog({ clos ...

There seems to be an issue with the functionality of the operators in the Calculator Javascript

I'm currently working on a Javascript calculator project for FreeCodeCamp and encountering an issue with the code. Whenever I input an operator like "-", "+", "x", etc., the numbers in the history section start repeating themselves. For example, if I ...

Discovering the reason behind a DOM element's visual alteration upon hovering: Where to start?

Visit this page, then click on the next button to navigate to the time slots section. As you hover over any time slot, you will notice a change in appearance. Despite inspecting Chrome's developer tools, I was unable to locate a style with a hover dec ...

How can I use jQuery to hide the calendar popup on the Bootstrap date picker?

What is the best way to prevent the calendar popup from appearing when using a Bootstrap date picker with jQuery? $("#id").val('').attr('disabled',true).trigger("liszt:updated"); I have tried using .prop and it's not working for ...

Creating input fields using Vuejs

Currently, I am learning how to incorporate HTML content rendering in Vuejs. I'm experimenting with creating a small input component that is generated through the render function. Here is a snippet of what I have so far: export default { name: &qu ...

The align-middle Bootstrap class does not seem to be working within the specified div

I want to vertically align text (<span class="align-middle">middle</span>) in the center of a div. Here is the code snippet: <div class="col-4 shadow product-added"> <div class="row"> <div cla ...

Is there a more efficient way to handle multiple arrays using a combination of .post() and PHP scripts, or can it all be processed in

I'm currently using a .post() request to fetch a PHP array into JavaScript. Here's an example: $.post("example.php",{"data":user},function( result ){ alert(result);},'json'); It works perfectly fine with a single array; however, I now ...

The correct rendering of background image paths is not functioning properly

Currently, I am utilizing Django Compress to streamline the process of using fewer files in their original format, rather than converting them to CSS files. This method has been successful except for a minor issue with translating the paths for background ...