Class for making elements draggable using jQuery UI

Is it possible to use jQueryui's draggable/droppable combo and add a class to the dragged item when dropped into a specific container, rather than adding a class to the container itself? I've tried adding a class to the container, but that is not achieving the desired result.

Currently working on this pen: http://codepen.io/zmuci/pen/Rrbvgg

<div class="categories">
  <div class="categorie">first category</div>
  <div class="categorie">second category</div>
  <div class="categorie">third category</div>
  <div class="categorie">fourth category</div>
  <div class="categorie">fifth category</div>
  <div class="categorie">sixth category</div>
  <div class="categorie">seventh category</div>
</div>

<div class="grid">
  <div class="grid-item grid-item-1">
    <div class="grid-item-inner"></div>
  </div>
  <div class="grid-item grid-item-2">
    <div class="grid-item-inner"></div>
  </div>
  <div class="grid-item grid-item-3">
    <div class="grid-item-inner"></div>
  </div>
  <div class="grid-item grid-item-4">
    &l t;div class="grid-item-inner"></div>
  </div>
  <div class="grid-item grid-item-5">
    <div class="grid-item-inner">& lt;/div>
  </div>
  <div class="grid-it m grid-item-6">
    <div class="grid-item-inner"></div>
  </div>
  <div class="grid-item grid-item-7">
    <div class="grid-item-inner"></div>
  </div>
  <div class="grid-item grid-item-8">
    <di v class="grid-item-inner"></div>
  </div>
  <div class="grid-item grid-item-9">
    < ;div class="grid-item-inner"></div>
  </div>
</div>

Answer №1

When utilizing the drop function, remember to include this line of code:

$(ui.draggable).addClass('newClass')

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

Retrieving information from an AJAX callback

Is there a way to extract the URLs from PHP data? Here is an example script that may help you achieve this: PHP $query = 'SELECT * FROM picture LIMIT 3'; $result = mysql_query($query); while ($rec = mysql_fetch_array($result, MYSQL_ASSOC)) { ...

open a new window with a reference based on the name

In order to obtain a reference to the currently open window, I utilize the following code: var refWindow = window.open("mypage1", "name_mypage"); If I wish to close the window, I simply use this command: refWindow.close(); When I refresh the screen (by ...

How to ensure Vue.js code modularity by preventing prop mutation within a child component?

After struggling with an unexpected mutation prop issue in a child component for quite some time, I stumbled upon this insightful quote: "When you have a component that receives an object through a prop, the parent is the one controlling that object, if ...

Error: Page not found - The requested URL localhost:8080/login could not be located

My first time trying to utilize ajax and json is resulting in a 404 error. The issue seems to be that /login cannot be found even though I have defined LoginServlet with the url pattern /login in web.xml. Here is the code from web.xml: <servlet> ...

Issue arises after injecting HTML element into the DOM due to memory constraints and display inconsistencies

Upon executing the following script in Firefox... var d = $("<div class='test'></div>"); d.hide(); $("body").prepend(d); d.show(); ...and examining the HTML, the inserted element will have the style attribute: style="display: blo ...

What is the process for retrieving a value from JSON utilizing JavaScript?

Unfortunately, I am completely stumped when it comes to Javascript. I'm attempting a few solutions based on online resources. If anyone could offer some assistance, that would be greatly appreciated. Below is the JSON data provided. It has been conde ...

Execute a function multiple times using various arguments in sequence within Node.js

I have an array filled with values and I am looking for a way to execute a single function with a callback for each element of the array, one after the other. In other words, I want the function to run with the value of the first element, then proceed with ...

Locating the exact position of a DOM node within the source document

Purpose In the process of creating a series of 'extractor' functions to identify components on a page using jsdom and nodejs, I aim to organize these identified 'component' objects based on their original placement within the page. Ch ...

Display Text Aligned in the Middle Beside Website's Logo

Newbie to HTML and CSS here! I'm attempting to achieve a design similar to this: Below is my code snippet: <div id="topbar"> <div class="image"> <img src="images/ghwlogo.png"> </div> <div class="text ...

Ensure that the ng-view element has a height of 100% and

Currently, I am working on developing an AngularJS app and my index page consists of a ng-view where all the content is injected using ui-router: <header> <nav class="navbar"> //content for navbar will go here </nav </hea ...

The jQuery.each function creates copies of items during every iteration

Having an issue with my JSON data display on a webpage. Each item appears to be duplicated with every loop iteration, even though the block variable seems correct when logged. I've tried searching for a solution online, but haven't had any luck ...

Decorate the elements that do not contain a specific child class

I'm currently working on an angular project with primeng for the UI components. My focus at the moment is on customizing the p-menu component, specifically the appearance of list items that are not active. The challenge I'm facing is that the act ...

I'm encountering an issue with the "z-index: -1" property in React

After creating a form placed alongside buttons, I encountered an issue where the form overlaps the buttons and prevents them from being clicked. Despite setting the z-index to -1, it seems that the form remains clickable even when not visible. Research ind ...

What is causing the compatibility issue between Ant Design V5 styles and NextJS?

Description In my NextJS project, I am using the Ant Design V5 framework with multiple pages. However, I am facing an issue where the styles are only working correctly on one page and not being applied properly on other pages. Despite referring to the off ...

Troubleshooting problems with CSS borders and margins in the anchor element

Having a peculiar box-model issue here. My header is filled with links, but despite setting 0px margins, the links are displaying with 2px margins around each one. To demonstrate the problem, I've created a test page located at . Ideally, each link i ...

Displaying Dates in an Express Application using EJS

I have a MySQL table with a column containing date data. I am building a webpage to display this data in a more user-friendly way. Currently, the displayed result looks like this: I would like the dates in the column to be formatted as something like ...

Tips on how to include a unique style sheet for IE8 in WordPress

Struggling with responsive behavior in IE8, some parts of my Wordpress website at are not displaying correctly due to issues with the @import query. To tackle this problem, I am considering creating a separate style sheet for IE6, 7, and 8 using the follo ...

What is the significance of $($(this)) in coding jargon

While browsing the internet, I came across a code snippet that includes the following line: if ($($(this)).hasClass("footer_default")) { $('#abc') .appendTo($(this)) .toolbar({position: "fixed"}); } I'm curious ab ...

Performing multiple Axios POST requests within a loop in a REACT application with dynamic variables

For my form inputs, I have an array of labels named changing_variable, which depend on the user's selection from a dropdown menu and vary in value. I'm trying to pass this dynamic variable to Axios.post method to correctly input data into my dat ...

issue encountered during resource provider setup

Below is my code snippet where I'm attempting to populate a table using ngResource in a RESTful manner. However, when I include configuration directives, I encounter an uncaught object MINERR ASST:22 error. var app = angular.module('infra&apo ...