Arranging images effortlessly using jQuery sortable feature in HTML

I'm currently working on creating sortable images using jQuery in an HTML document. I've encountered an issue with the source code here. I have implemented the jQuery sortable function in a functions.js file and successfully tested it on another page with text content, confirming that it works. However, when trying to apply this functionality to the divs containing images and their titles, I am facing difficulties. Could this be related to how I have styled the CSS for the image divs?

Below is the source code snippet. Note the "sortable" class used to define the sortable div that encapsulates the image divs.

<html xmlns:exist="http://exist.sourceforge.net/NS/exist">
    <head>
        <title>William Blake Archive Comparison of The First Book of Urizen (1794): electronic edition</title>
        <script src="/blake/applets/lightbox/lb.js"></script>
        <link rel="stylesheet" type="text/css" href="/blake/style.css" />
        <link rel="stylesheet" type="text/css" href="/blake/slider.css" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
        <script src="/blake/jQueryRotate.2.1.js" type="text/javascript"></script>
        <script src="/blake/binaryajax.js" type="text/javascript"></script>
        <script src="/blake/imageinfo.js" type="text/javascript"></script>
        <script src="/blake/exif.js" type="text/javascript"></script>
        <script src="/blake/accessibleUISlider.jQuery.js" type="text/javascript"></script>
        <script src="/blake/functions.js"></script>
        <style type="text/css"></style>
        <meta lang="en" />
        <script type="text/javascript"></script>
        <link rel="meta" type="application/rdf xml" href="/exist/blake/archive/rdf.xq?req=&amp;mode=obj" />
    </head>
    <body onLoad="window.name=''">
        <div>
            <table cellpadding="25" style="width:auto;" id="comparison">
                <tr>
                    <div id="sortable" class="ui-state-default">
                        <td valign="top" align="center" style="font-size:smaller;">
                            <div style="min-width:350px;">
                                <p>The Book of Urizen,   copy G,  
c. 1818 (Library of Congress): electronic edition <br />
                                    <a href="/exist/blake/archive/object.xq?objectid=urizen.g.illbk.21&amp;java=no" target="wbamain">object 21 (Bentley 21, Erdman 21, Keynes 21)</a>
                                </p>
                                <img src="/blake/images/urizen.g.p21.100.jpg" />
                                <p>
                                    <a href="javascript:START('/exist/blake/archive/userestrict.xq?copyid=urizen.g')">
                                        <span style="font-size:smaller">©<date>1998</date>
                                        </span>
                                    </a>&#160;&#160;&#160;&#160;
</p>
                            </div>
                        </td>
                        <td valign="top" align="center" style="font-size:smaller;">
                            <div style="min-width:350px;">
                                <p>The First Book of Urizen,   copy B,  
1795 (Morgan Library and Museum): electronic edition <br />
                                    <a href="/exist/blake/archive/object.xq?objectid=urizen.b.illbk.23&amp;java=no" target="wbamain">object 23 (Bentley 21, Erdman 21, Keynes 21)</a>
                                </p>
                                <img src="/blake/images/urizen.b.p23-21.100.jpg" />
                                <p>
                                    <a href="javascript:START('/exist/blake/archive/userestrict.xq?copyid=urizen.b')">
                                        <span style="font-size:smaller">©<date>2003</date>
                                        </span>
                                    </a>&#160;&#160;&#160;&#160;
</p>
                            </div>
                        </td>
                        <td valign="top" align="center" style="font-size:smaller;">
                            <div style="min-width:350px;">
                                <p>A Large Book of Designs,  copy A,  
1796 (British Museum): electronic edition <br />
                                    <a href="/exist/blake/archive/object.xq?objectid=bb85.a.spb.02&amp;java=no" target="wbamain">object 2 (Bentley 85.2, Butlin 262.3)</a>
                                </p>
                                <img src="/blake/images/bb85.a.2.ps.100.jpg" />
                                <p>
                                    <a href="javascript:START('/exist/blake/archive/userestrict.xq?copyid=bb85.a')">
                                        <span style="font-size:smaller">©<date>2012</date>
                                        </span>
                                    </a>&#160;&#160;&#160;&#160;
</p>
                            </div>
                        </td>
                    </div>
                </tr>
            </table>
        </div>
        <p>
            <script language="JavaScript">
                        datestamp( );   
                </script>
        </p>
    </body>
</html>
jqueryhtmlcssimagejquery-ui-sortable

Answer №1

To ensure proper organization, it is important to assign the id to the tr and the class to the td

Check out this live demonstration on jsFiddle

$(function(){
    $('#comparison').sortable();
})

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

Positioning div at the top of the body section

Presently, I have this specific designhttps://i.sstatic.net/U4IT4.png The issue I am facing is with the alignment of the jumbotron (boostrap v5). It is currently centered, but I would like it to be positioned at the very top of the body. I have experiment ...

htmlcssfrontendbootstrap-5

Preventing special characters, numbers, and spaces from being used as the first character in a word in HTML with regular expressions

Is there a way to restrict users from inputting special characters, numbers, and spaces only in the first place of a word using regex in HTML? <label><span>Current Carrier</span></label> <input name='Current Carrier' t ...

javascriptc#htmlcssregex

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Having a data-filled table, I am looking to implement smooth transitions when adding or deleting an item. This is a ReactJS project utilizing Material-UI. The desired effect is similar to the one demonstrated in their example. While they use a List compon ...

cssreactjshtml-tablematerial-ui

positioning a text input in the center instead of at the top of the page

Hello everyone, I am just starting out with HTML and I have a question. How can I make the Username: <input type="text" name="Username" style="- margin-top: 200px;"> appear in the center of the page instead of at the top? I've tried changing the ...

javascripthtml

Seamless Integration of jQuery Functions

I am in need of some assistance with passing a chain of jQuery methods into a function as an argument. The goal is to have dynamic methods executed on a DOM object. This functionality would be particularly useful for writing qUnit tests where centralizat ...

javascriptjquery

Incorporating marker tags to different sections of text within a contenteditable div

The main objective of this feature is to enable users to select placeholders within message templates (variable names enclosed in %). Inspired by Dribbble The API provides strings in the following format: "Hello %First_Name% %Middle_Name% %Last_Name% ...

javascripthtmlcssangular

Is there a way to modify the CSS of the sequential number element when it is clicked on?

I've successfully utilized jQuery to create sequential numbering for my menu items. Upon clicking, the hyperlink text changes color to red. However, I'm facing an issue where I want the corresponding number to also change to red when the hyperli ...

javascriptjqueryhtmlcss

Enhance the autocomplete feature by triggering suggestions both with key presses and the Enter key

I am currently working on implementing an autocomplete search feature that triggers by both keypress and pressing the enter key. While the keypress functionality is working as expected, I am facing issues with getting it to work after pressing the enter ke ...

jquery

Background and border presentation issues arising from CSS conflict

While working on a webpage, I encountered a design conflict within a div that contains a group of other div elements. The current appearance can be seen at , and the desired look is shown in the image here: enter image description here ...

htmlcss

What is the best way to ensure that a navbar dropdown appears above all other elements on

I'm having trouble creating a navbar dropdown with material design. The dropdown is working fine, but the issue I'm facing is that other elements are floating above it. https://i.stack.imgur.com/aJ0BH.png What I want is for the dropdown to floa ...

javascripthtmlcssmaterial-ui

Updating Text in Textarea upon Selection Change

Need assistance with updating the content of a textarea based on a select option change. Below is an example of my code: <tr><td>Template:</td><td> <select t name="template" onChange = "setTemplate();"> <option ...

javascripthtmltextareaselection

Avoid vertical clipping issues by utilizing the overflow-y property

I am working on a horizontal navigation menu with two levels; the second level is displayed vertically. The number of items in the second level can vary, sometimes causing the list to extend beyond the browser view. To address this issue, I have used overf ...

htmlcss

Unable to configure AngularJS inputs to have a blank default value

I am facing a peculiar issue where I am unable to initialize my input fields as blank/empty. Even after clearing the cache and performing a hard reload, Google Chrome seems to be auto-populating them with older cached values. Here is the current view: ht ...

javascripthtmlangularjs

Perform an SQL function to select and update data

I need to run this code, but I'm missing one key variable that I can't seem to locate. Here's my current code snippet: SELECT CODE = 'P1R2G1' and CATEGORY = '20M' IF RANK op1 = '1' THEN UPDATE tourneyeventga ...

phphtmlsqlphpmyadminsql-update

Displaying the value of a jquery variable in an HTML document

I'm tackling a problem differently today compared to yesterday, but my knowledge of jQuery and JavaScript is quite basic. My goal is to increment the transform value of a div every 5 seconds: <div style="transform: translateX(0px);" id="slide_ima ...

javascriptjqueryhtmlcss

The post method does not function with Internet Explorer 8 or 9 when using jQuery Ajax

When using jQuery 1.11 from a CDN and jQuery migrate 1.2.1 from another CDN, I have the following setup for document ready. The AJAX function sends form values to a file named "mail.php" in the same directory. This file checks if it was called via AJAX, re ...

phpjqueryajaxpost

php After the ajax request, the array_push function is failing to add values to the

I am having trouble with my ajax and php implementation. I want to append an array every time an ajax call is made, but it doesn't seem to be working. Here are the codes I am using: $('#multiple_upload_form' +count).ajaxForm({ ...

javascriptphpjqueryarraysajax

The largest allowable call stack size within jQuery version 1.9.0

I have a question about poorly written code that I've been experimenting with. It's messy, but it's just for fun. I was attempting to create a "like system" where a user clicks on a button and the object ID associated with the button is sent ...

phpjavascriptjquery

Use jQuery to smoothly scroll a div

I created a container using a <div> element which is divided into 3 inner divs. The first two inner divs are meant to serve as previous and next buttons, with ids of prev and next respectively. At the bottom, there are 3 more inner divs, each with un ...

javascriptjquerycss

Is it safe to use handlebars' default escaping in HTML attributes?

Currently, I am working on a project where various HTML escaping methods are being utilized. Some properties are escaped in the backend and displayed as raw strings using triple handlebars {{{escaped-in-backend}}}, while others are passed from the backend ...

htmlattributesescapinghandlebars.jsesapi