Tips for customizing the appearance of a jQuery sortable target list prior to dropping items

When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the placeholder.

Here is my code setup:

HTML:

<div class="sortable">
    <div class="item"></div>
</div>
<div class="sortable"></div>
<div class="sortable"></div>

Javascript:

$(".sortable").sortable({
    connectWith: ".sortable",
    over: function(event, ui){
        //add class .hover to list
    },
    change: function(event, ui) {
        //style placeholder
        ui.placeholder.css({
            visibility: 'visible',
            background: '#EEE'
        });
    }
});

Check out the demo here

javascriptjqueryhtmlcssjquery-ui-sortable

Answer №1

After consulting Alteyss's suggestion, I have made adjustments to style the parent item by including additional lines for events such as over, stop, and out:

$(".sortable").sortable({
    connectWith: ".sortable",
    stop: function(event,ui){
        $('.sortable').removeClass('hover');
    },
    over: function(event,ui){
        // Adding class .hover to list
        $('.ui-sortable-placeholder').parents('.sortable').addClass('hover');
    },
    out: function(event,ui){
        $('.ui-sortable-placeholder').parents('.sortable').removeClass('hover');
    },
    change: function(event, ui) {
        // Styling placeholder
        $('.ui-sortable-placeholder').css({
            visibility: 'visible',
            background: '#EEE'
        });
    }
});

Check out the updated demo here.

Answer №2

Another method for customizing the placeholder style :

When you drag a box, you'll notice a tag with a class associated with the placeholder:

ui-sortable-placeholder

Create a unique class to override the default styles:

.ui-sortable-placeholder
{
  //Custom Style Here
}

Edit: Applying the hover effect

Implement a function in jQuery to manage the hover class and execute it within the event parameters:

    // Your function
    var addClass = function (jQueryElement, add) {
        // Add or remove the class based on the boolean value
        if (add) {
            //Adding class using addClass function from jQuery
            $(jQueryElement).addClass("hover");
        } 
        else {
            //Removing class using removeClass function from jQuery
            $(jQueryElement).removeClass("hover");
        }
    }

    // Plugin Setup
    $(".sortable").sortable({
        connectWith: ".sortable",
        over: function(event,ui){
            var elementsToChange = $(".ui-sortable-placeholder").parents(".sortable");
            addClass(elementsToChange, true);
        },
        out: function(event,ui){
            var elementsToChange = $(".ui-sortable-placeholder").parents(".sortable");
            addClass(elementsToChange, false);
        },
        stop: function(event,ui){
            addClass(".sortable", false);
        },
        change: function(event, ui) {
            //Styling the placeholder
            ui.placeholder.css({
                visibility: 'visible',
                background: '#EEE'
            });
        }
    });

Check out this cool Fiddle!

Explore more events in the documentation here : http://api.jqueryui.com/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

Exploring Anchor Tags in Next.js

I'm having trouble using an anchor tag in Next.js Despite not receiving any console errors when setting it up and clicking the link, the page doesn't scroll to the specified id tag. A recent GitHub issue implies that a significant amount of cus ...

htmlnext.js

Toggle visibility of multiple DIVs with identical classes using radio buttons

I'm looking to streamline my use of radio buttons in HTML. How can I implement a single set of radio buttons at the top that will toggle the visibility of all DIVs with the same class on my webpage? <form> <input type="radio" name="csr_sel ...

javascriptjqueryhtmlforms

Search for specific parameters in an array and retrieve them

I have been attempting to sift through an array of data retrieved from my API, but unfortunately, the data remains unfiltered. I suspect that it might be due to the way I implemented my method or perhaps my params are not being returned correctly. Below ar ...

javascriptreact-native

In JavaScript, generate a new column when the text exceeds the height of a div

Is it possible to create a multicolumn layout in HTML that flows from left to right, rather than top to bottom? I am looking to define the height and width of each text column div, so that when the text overflows the box, a new column is automatically ge ...

javascripthtml

ESLint warning: Potentially risky assignment of an undetermined data type and hazardous invocation of an undetermined data type value

Review this test code: import { isHtmlLinkDescriptor } from '@remix-run/react/links' import invariant from 'tiny-invariant' import { links } from '~/root' it('should return a rel=stylesheet', () => { const resp ...

javascripttypescripteslint

The Vue.js router is malfunctioning

After searching through several posts on Stackoverflow about issues with routes not functioning properly, I have yet to find a solution for why my routes are not working. This is how my router looks: import Vue from 'vue' import Router from &ap ...

javascriptvue.js

Best practices for transferring data in node.js (unresolved)

Is it possible to pipe a file from an external server through localhost using Node.JS? (Imagine loading localhost as if it were another site like ) Here is the scenario: A PC requests http://localhost:80/highres/switch.html The Node application then ...

javascriptnode.jsproxynode-modulesvpn

The returned JSON object lacks a specified name

After receiving the JSON data from the server, I noticed an unnamed node within the 'someStuff' object: { "someStuff": { "": { "foo": 0 }, "moreStuff": { "foo": 2 } } } This raises ...

javascriptjqueryjson

"Losing focus: The challenge of maintaining focus on dynamic input fields in Angular 2

I am currently designing a dynamic form where each Field contains a list of values, with each value represented as a string. export class Field { name: string; values: string[] = []; fieldType: string; constructor(fieldType: string) { this ...

javascriptangularangular2-formsngforangular2-ngmodel

Elevate the index of the name attribute for an input field within a dynamically generated form

In my scenario, I have created a form that includes indexed input fields for username and level: <form> <table> <tr class="trToClone"> <td> <label>Username:</label> <input type="text" name="usernam ...

javascriptjqueryhtmlforms

Utilize a React Switch Toggle feature to mark items as completed or not on your to-do list

Currently, I am utilizing the Switch Material UI Component to filter tasks in my list between completed and not completed statuses. You can view the demonstration on codesandbox The issue I'm facing is that once I toggle a task as completed, I am un ...

javascriptreactjsreact-hooksmaterial-uicodesandbox

Instead of using a v-if condition, add a condition directly in the Vue attribute

Apologies for the unclear title, as I am unsure of what to name it with regards to my current issue, I am attempting to create a component layout using vuetify grid. I have a clear idea of how to do this conventionally, like so: <template> <v-fl ...

javascriptvue.jsvuetify.js

Am I on the right track with incorporating responsiveness in my React development practices?

Seeking advice on creating a responsive page with React components. I am currently using window.matchMedia to match media queries and re-rendering every time the window size is set or changes. function reportWindowSize() { let isPhone = window.matchMed ...

javascripthtmlreactjscss-grid

Exploring the intricacies of Bower and enhancing dependency management

Currently, I am working on developing a project named myapp using angularJS along with Yeoman Generator. This project involves utilizing Bower to manage dependencies and Grunt to wiredep those dependencies into the index.html file (which essentially genera ...

javascriptangularjsyeomanbower

Having trouble with CSS box alignment issues in the top margin

I am working on customizing a CSS box for a navigation menu. Here is the current CSS code: .navigation-div { text-align:right; margin-top:14px; box-shadow:0px 0px 10px rgba(0,0,0,0.47); padding: 0; color:#E3E3E3; background-color: ...

htmlcss

Refresh the current page in Next.js when a tab is clicked

I am currently working on a Next.js page located at /product While on the /product page, I want to be able to refresh the same page when I click on the product link in the top banner (navbar) that takes me back to /product. Is there a way to achieve this ...

javascriptreactjsnext.jsrouter

Having issues implementing a jQuery function within an anchor tag with a specific class

I have designed the navigation on my website using links within the children of a list. The links have text that is indented so that only the image is visible. I am trying to show specific sub-navigation using jQuery hover for 2 of the links, but it is not ...

jquerywordpresshoverconflict

A guide on retrieving nested objects from my API and parsing the resulting data in each iteration for individual elements

Struggling to update my website with a new API, specifically with accessing nested objects in a loop. Still trying to wrap my head around ajax and JSON concepts. Take a look at the API output and JS code I've been working on for a better understanding ...

jqueryjsonajax

What is the method to activate a select event on a particular row using Google visualizations?

Currently, there is a single table where clicking on a row should simulate the same action on another GV table. The code for the listener is as follows: $(".mytable tbody tr td").click(function() { var colIndex = $(this).parent().children().index($(th ...

javascriptjquerygoogle-visualization

Searching for specific text within HTML href tags involves parsing the HTML document and

[I'm having trouble isolating links that contain the specific text '/Archive.aspx?ADID='. Even though I have tried to filter for these specific links, I end up retrieving all of the links from the webpage. Once I am able to extract the desir ...

pythonhtmlparsingweb-scrapingbeautifulsoup