Displaying selected elements with JQuery Draggable functionality

A project I'm working on involves using jQuery Draggable to enable users to drag new elements into another div. Everything is functioning correctly, but I would like the element that's been dragged to appear on the left side in a different color to indicate it has been selected.

You can view my codepen here: https://codepen.io/scottYg55/pen/MWeXERP

I'm looking for a way to make it so that if a user selects a journey, it will display as black.

  $(".journey").draggable({
    appendTo: "body",
    cursor: "move",
    helper: 'clone',
    opacity: 0.1,
    revert: "invalid"
  }).disableSelection();

The script above targets the draggable area and everything related to it is available on the codepen link.

Thank you!

javascripthtmljquerycss

Answer №1

One way to enhance this functionality is to turn the "revert" into a function. When the draggable item is dropped into a valid droppable area, its background color changes.

revert: function(valid){
            if(valid)
                $(this).css("background-color","black");
            else
                return true;
        }

If the same draggable item is moved to a different droppable area, it will inherit the new black background color. To prevent this, you can add a drag function to the draggable that resets the background color while moving the item.

drag: function(){
          $(this).css("background-color","unset");
      }

For an updated version of the code, check out this Codepen link: https://codepen.io/mistersven/pen/abZKEwy

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

Ways to Extract HTML DOM Attributes using Jquery

I am working with an HTML DOM that is saved in a JavaScript Variable. I need to figure out how to retrieve its attributes. For example: <script> //element_html is ajax response var element_html = '<h1 style="" class="app-control " data-order ...

javascriptjqueryhtmlajaxdom

Using Typescript and Webpack - Make sure you have the right loader set up to handle this specific file type, as at the moment there are no loaders configured to process

I've encountered an issue while setting up Webpack for Typescript and React. Upon executing the NPM script: webpack serves ./webpack/webpack.config.ts --open, an error surfaced in the console: https://i.sstatic.net/xqpUV.jpg Below are the details of ...

javascriptreactjstypescriptwebpack

What is the best way to add HTML content to a specific div element within an AJAX call's success function?

In the provided ajax script, my goal is to insert HTML content into a specific div element inside a table. The main div element in question is named "ajaxcom", but I need to insert the HTML content into a div element with the class = "divrep". How can I ac ...

javascriptjqueryajaxasp.net-mvc-3asp.net-mvc-4

Steps to show submenus upon hovering over the main menu items

I am trying to create a vertical menu with multiple levels using HTML and CSS. Here is the code I have written so far: <ul> <li>Level 1 menu <ul> <li>Level 2 item</li> <li>Level 2 item</li&g ...

javascripthtmlcss

Error message "Access-Control-Allow-Origin header is missing on the requested resource" occurs during an AJAX request

When trying to send a GET request using jQuery AJAX, I keep encountering an issue. $.ajax({ type: 'GET', url: /* <the link as string> */, dataType: 'text/html', success: function() { alert("Success"); }, error ...

javascriptjqueryajaxcorsxmlhttprequest

Tips on utilizing commas as text input within an HTML input array

Is there a way to pass a comma in an input field to the server using input arrays? The server currently receives comma-separated input values from an array of inputs, which causes it to consider any commas within the input as separators. For example: HTM ...

c#jqueryhtmlasp.net

Struggling to choose an element by ID and classname?

Currently, I'm diving into the world of HTML and CSS and have encountered a question about selecting elements in CSS. I understand that we use .Classname{} to select a class and #IDname{} to select an ID. But my main confusion lies in trying to selec ...

htmlcsscss-selectors

What is the process for creating and registering custom Handlebars functions?

Despite spending plenty of time searching, I am still unable to find detailed information on where exactly to place my custom handlebars helpers. Should they be added in a <script> tag within my webpage's .hbs file? Or should I include them in a ...

javascriptnode.jsexpresshandlebars.js

Execute the JavaScript callback

I am encountering an issue when trying to pass an anonymous function as a callback and call it. I seem to be missing something simple, because I keep getting the error 'Uncaught type error - callback is not a function'. Here is what I am attempti ...

javascriptjquerycallbackanonymous-function

Having trouble configuring webpack for CSS Modules? You may be dealing with an invalid configuration object

Encountering an issue while setting up webpack for CSS Modules... An error message is appearing stating that the configuration object is invalid. It seems that the output path specified as "build" is not an absolute path, which is required. Below are ext ...

javascriptjsonnpmwebpack

Using JavaScript to control the state of a button: enable or

In the process of creating a basic HTML application to collect customer information and store it in a database, I have encountered a specific user interface challenge. Once the user logs into their profile, they should see three buttons. Button 1 = Print ...

javascriptjqueryhtmlcookiessession-state

Getting the desired value from a CreatableSelect in React can be achieved by following these steps:

I have a form that includes a React library component called React Select. I'm struggling to retrieve the target value of this input field. Here's my code snippet: # CreatableSelect tag <CreatableSelect className={Astyle.selectInput} i ...

javascriptreactjsnext.js

I'm a bit puzzled by a particular function that was explained in a section of my coding bootcamp module

I'm currently delving into express.js and trying to understand the inner workings of a function that retrieves detailed information about animals based on a query. This function is designed to search for animals by name and return all relevant data, b ...

javascriptnode.jsexpress

Mongoose Filtering in Rest API: A Comprehensive Guide

Currently, I am utilizing Express to construct an API. Within this API, my objective is to retrieve a list of customers from MongoDB by using Mongoose. The code snippet below showcases the route I have set up (please disregard any paging and limit concerns ...

javascriptnode.jsmongodbexpress

Troubleshooting the "dispatch is not a function" error and finding a resolution

Currently, I am working on a react-redux project that involves fetching movie information from the OMDB api based on user-provided search terms. I'm facing an issue where the text entered into the search bar is not updating the store value for the fil ...

javascriptreactjsreduxreact-redux

The script name you entered, 'jquery', is invalid. Make sure script names end with '.js'

After experiencing a power failure, my ASP.Net project was running smoothly until I started getting errors such as: "Could not load assembly Sanitizer..." followed by "Could not load "HtmlAgility... I managed to fix these errors by uninstalling and rei ...

jqueryasp.net

The server encountered an unexpected error while processing the request, possibly due to a

My JavaScript file includes an interval function that calls the following code: setInterval(function() { $.getJSON('/home/trackUnreadMsgs', function(result) { $.each(result, function(i, field) { var temp = "#messby" + result[i].from; ...

javascriptphpajaxhttp-status-code-500

What is the best way to retrieve a line of data in JSON format using jQuery?

I am receiving JSON data from a source [{"Title":"Gross Wages","Last":"$40,000","MTD":"$40,000","QTD":"$40,000","YTD":"$40,000"}, {"Title":"Total Taxes","Last":"$50,000","MTD":"$50,000","QTD":"$50,000","YTD":"$50,000"}, {"Title":"Total Benefits","Last":"$ ...

jqueryjson

Ways to make an area map more transparent

I'm encountering an issue with HTML opacity... Currently, I've implemented opacity using CSS but it's not functioning correctly. Below is my HTML and CSS code: <area shape ="rect" class="transbox" coords ="0,0,30,22" href ="test1.htm" ...

htmlcssopacity

Adding information into MongoDb with the help of mongoose

I am currently working with an array of strings and my goal is to iterate through this array and update my collection with its values. This is the approach I have taken: if (employees) { employees.map((employee) => { Employee.updateOne({ ...

javascriptmongodbmongoose