Styling jQuery Draggable and Droppable <li> elements

I am facing a challenge with my drag and drop functionality using jQuery. While the drag drop feature works perfectly, I need to display two separate pieces of information from a database on each "li" item in different styles.

My goal is to include a "track length" for each list item and have it styled differently in terms of background and text color, while still being contained within the same "li" element so that it remains draggable. Is there a clean and efficient way to achieve this using basic HTML/CSS?

<ul class="songs">
<li class="song_title track_length">Title 1<span class="length">3:30</span></li>
<li class="song_title track_length">Title 2<span class="length">4:15</span></li>
</ul>
jqueryhtmlcss

Answer №1

Although this may not be a jquery-related inquiry, you can still achieve draggability by adhering to the following HTML structure and applying the necessary styling for both data elements.

<ul class="songs">
    <li class="song_title">
        <span class="title">Title 1</span>
        <span class="track_length">Some Length</span>
    </li>
    <li class="song_title">
        <span class="title">Title 2</span>
        <span class="track_length">Some Length</span>
    </li>
</ul>

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

Issue with bottom margin on the last flex item located at the end of the container is not being applied

My button is currently touching the end of the container, but I want to create some space between them. However, adding a margin bottom to the button does not seem to be working as expected. Below is the CSS and HTML code: .events{ height: 100%; d ...

htmlcssflexbox

Tips for avoiding duplicate Id tags while using Ajax in MVC

Hello everyone, I am curious to learn about the precautions and techniques you employ when working with Ajax or MVC functions such as @Html.Action in order to effectively manage and prevent duplicate Ids for Html tags. In addition, how does the page handl ...

htmlajaxasp.net-mvc

When the enter key is pressed in a contenteditable div, line breaks are disregarded

Is there a way to ensure that when the return key is pressed to start a new line for a post, the output actually starts on a new line? I've been having trouble with this and would like to know the most common solution. Check out the demo below for te ...

javascriptphphtmlcss

Getting the dimensions of an image when clicking on a link

Trying to retrieve width and height of an image from this link. <a id="CloudThumb_id_1" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'http://www.example.com/598441_l2.jpg'" onclick="return theFunction();" href="http ...

javascripthtml

Step-by-step guide on loading an external javascript file once a webpage is fully loaded, and incorporating a function from it

After the initial page load, I have a need to incorporate an external JavaScript file into an HTML file. This is necessary because a variable in this external JS file only updates after the HTML file has fully loaded. Additionally, I want to utilize the fu ...

javascripthtml

Styling for the DataTable disappears upon loading jQuery

my PHP file named "zero3data.php" <?php printf('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">'); printf('<thead>'); printf('<tr>'); ...

javascriptcss

"Customize Your CSS Dropdown Menu with Dynamic Background Color for div Elements

I recently put together a website dedicated to watches. Feel free to check it out at horology dot info. (Please refrain from sharing the direct URL of my site in your reply.) I'm curious as to why the dropdown menu, sourced from , is showing up unde ...

htmlcss

Is it possible to determine the search query if the search term appears within the website URL?

I'm trying to figure out which action url and name term to use when the search term is located in the middle of the URL. For instance, the HTML code below enables me to type text and upon pressing enter or the button, it redirects me to the website w ...

html

Converting JSON into HTML format

Seeking guidance as a developer tasked with rendering JSON to HTML on a webpage. I've taken over for someone else and, despite feeling somewhat in over my head, have managed to build the basic structure using Catalyst/Template Toolkit and Dojo. Now th ...

htmljsondojoxmlhttprequest

When <tr> is used as a link with the target="_blank" attribute

I'm facing an issue with my HTML and jQuery code. I'm trying to make a table row act as a link, but I'm struggling to figure out how to add the target="_blank" attribute. Could someone assist me in resolving this? Below is the snippet of H ...

jqueryhtmlhtml-table

Using jQuery to trigger an action when a user clicks on a regular audio element

Is there a way to detect a click on the default audio element of a browser using jQuery? I'm having trouble getting it to work in Chrome. $('audio').click(function(){ alert("You have clicked on an audio player"); }); <script ...

javascriptjqueryaudiohtml5-audio

Issue with Accordion Panel Content Scroll Bar

Hello there, I've encountered a puzzling problem with my website. My objective is to insert a Time.ly Calendar widget into one panel of my accordion. On this page, "TOURNAMENTS: , the widget appears exactly as desired. However, when I replicate the c ...

javascripthtmlcssscrollaccordion

issue with padding-bottom in Firefox and Internet Explorer 11

JsFiddle CSS body, html { background: violet } * { margin: 0; padding: 0 } .fixed { height: 100%; width: 300px; background: #fff; right: 0; position: absolute; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; ...

htmlcssfirefoxflexboxcross-browser

How can I verify if an SVG file has a reliable source? (having troubles converting SVG to canvas)

While attempting to use an SVG generated by a chart plugin (https://wordpress.org/plugins/visualizer/), I am facing issues retrieving the source of the SVG-image being created. Interestingly, when using other SVGs with the same code, everything works perfe ...

javascriptjqueryhtmlcanvassvg

Tips for using jQuery to slowly change a CSS property to "auto"

I've encountered a situation where I have an element styled with position:fixed, and bottom: auto;. When I apply the command .animate({bottom : '10%'});, it smoothly slides to the specified position. However, when I try to set it back to its ...

javascriptjqueryhtmlcssjquery-ui

Distinguishing jQuery Selectors

In the Document Object Model (DOM), there is an element written as: <div id="main" class="main"></div>. Would selecting this element by using $('#main') be different from $('.main:first')? EDIT: I should note that this ques ...

jqueryjquery-selectors

Automatically submitting the selection when it changes

I am facing an issue with a selection form that is supposed to update the database on change using jQuery, but it seems like nothing is happening. Can anyone provide assistance with this problem? <SELECT name='status' id='status'> ...

javascriptphpjquery

Instructions on creating a countdown timer that reveals a hidden div once it reaches zero, remains visible for a set period, and then resets

I created a countdown timer that displays a div when the timer reaches zero. However, I am struggling with getting the timer to reset and start counting down again after displaying the div. For instance, if I set the timer for 7 days and it reaches the de ...

javascriptjqueryhtmlcsstimer

Modal box fails to refresh content

Currently, I am in the process of learning how to modify my blog using a modal window. However, when I click on the edit button within the modal, an error message 'Failed to execute 'fetch' on 'Window': Invalid name' appears i ...

javascripthtmlcssreactjsbootstrap-modal

When making an AJAX POST request, a Javascript associative array may unexpectedly become empty

I've encountered a problem. There's a page with multiple text fields that have the same class name but different attribute values. I need to create an array that has unique keys which combine the attribute values of the text fields, and then pass ...

jqueryarraysajaxpost