Using jQuery to drag a div and drop it to swap out an image in a different

I am looking to implement a drag and drop function where I can move elements from one div to another, each containing different images. However, I want the image displayed in the second div to change based on the element being dragged.

For example: When dragging #element1 into the images's div, I want to display the image with .element1 class and hide the image with .element2 class.

<div id="element1"></div>
<div id="element2"></div>

<div id="images">
<img class="element1" src="1.jpg" />
<img class="element2" src="2.jpg" />
</div>

Is this possible? I came across a method using jQuery for changing background images but I need it for actual img tags.

I tried implementing it here: http://jsfiddle.net/wolfovs/ab0566Lt/1/

If anyone can help me out, I would greatly appreciate it! Thank you!

javascriptjqueryhtmlcssdrag-and-drop

Answer №1

Make sure to include the jquery and jquery-ui library either in the head section of your HTML or right before closing the body tag.

$("#images").droppable({
  drop: function(e, ui) {
    if((ui.draggable.attr("id")) == 'element1'){
       $('.element2').hide();
       $('.element1').show();
    }else if((ui.draggable.attr("id")) == 'element2'){
       $('.element1').hide();
       $('.element2').show();
    }
});

Check out the DEMO here

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

"Trouble Encountered with the dragAndDrop Function in WebdriverIO Version

I've been experimenting with different methods like dragAndDrop and performAction, but unfortunately, none of them seem to be working for the Vue.Draggable web app (for example: vuedraggable: Two Lists). Can anyone offer a solution if possible? Here ...

vue.jstestingdrag-and-dropwebdriver-iovuedraggable

How to download a file using AJAX in Laravel?

Is there a way to download a CSV file within an ajax call? I have an ajax request in my Laravel controller that successfully retrieves the file contents in the response. However, I am facing issues with actually downloading the file. Laravel controller c ...

javascriptphpjqueryajaxlaravel

Include a return or delete from the default IO statement

I am utilizing an intersection observer that alters the header's font-color and background-color based on the content intersecting with it. This change is determined by the presence of data-color and data-background attributes declared on the div/sect ...

javascripthtmlcssintersection-observer

Changing dates in JavaScript / TypeScript can result in inaccurate dates being displayed after adding days

Recently, I encountered an issue with a simple code snippet that seems to produce inconsistent results. Take a look at the function below: addDays(date: Date, days: number): Date { console.log('adding ' + days + ' days'); con ...

javascriptdatedatetimetimetypescript

Using AJAX with Django's CreateView functionality

I am looking to utilize generic views and modals with AJAX in Django for creating, updating, and deleting objects. In the official Django documentation, the AjaxableResponseMixin is discussed along with this code snippet: from django.http import JsonRespo ...

jqueryajaxdjango

Platform Independent Data Storage Solution

Looking to create a Cross-browser compatible Web Application using HTML, JS, and CSS. In need of a robust database storage solution that can be queried on the client side using JS. While Web SQL/SQLite seems like a good option, it lacks support in IE. Does ...

javascriptjquerysqlitecross-browser

Oops, it seems like there is a TypeError with the function window.initMap in Google Maps

For the past week, I have been struggling to update my marks on Google Maps while using AJAX in an HTML page. My controller fetches data from the database and sends it back, but now I am encountering the following error: TypeError: window.initMap is not a ...

javascriptphpajaxgoogle-maps

Secure your website with the latest JWT cookie security measures

After storing a JWT with an expiry date set 30 days ahead, the question arises - is it secure to store this JWT in a cookie? The aim is for the token to persist beyond a single session, much like the "Keep me logged in" feature found on some websites. Se ...

javascriptnext.jscookiesjwt

Ways to obtain the latitudes and longitudes for various routes between a starting point and a destination

At the moment, I am successfully retrieving all the latitude and longitude coordinates from the source to destination location. However, I am only able to obtain 1 path using this method. Now, I would like to have the ability to choose a specific route p ...

javascriptc#asp.netgoogle-maps

What is the most effective method for implementing COPY/INSERT functionality with cascading effects in PostgreSQL?

Seeking advice on the most effective method to perform an "on cascade copy/insert" of linked elements within PostgreSQL. To better explain my scenario, I've crafted a straightforward example: Understanding the Database Structure Within the datab ...

javascriptnode.jsdatabasepostgresqlsequelize.js

Angular routing is failing to redirect properly

After creating a sample Angular app, the goal is to be redirected to another page using the browser URL http://localhost:1800/demo. The index.html file looks like this: <!doctype html> <html lang="en"> <head> <title>Sample Ang ...

htmlangulartypescript

Make sure to refresh the node.js express api every minute with the latest timestamp available

I'm currently working on setting up a Node.js Express API to expose a MySQL table. Everything is working fine except for the part where I need to filter data by a current timestamp and update it every few minutes. I've tried using setInterval but ...

javascriptmysqlnode.jsapiexpress

The functionality of the Bootstrap dropdown list button is not functioning properly on mobile devices

Currently, I am in the process of developing a website and testing its mobile view on my iPhone. The website is still using bootstrap 3, but I have encountered some issues. When I tap on the navigation button on my iPhone, nothing happens - no dropdown lis ...

javascriptjqueryhtmlcsstwitter-bootstrap

Setting up initial values for a JSON array in an AJAX function upon the document being fully loaded

I am currently developing an Ajax function that passes values from an array. My goal is to simplify the process of handling various translations by creating a JSON file containing all the required translations and then making it available to my main Ajax f ...

jqueryajaxjson

Transferring a variable between a JavaScript function and a Java class

Currently, I am working with STS and building an application that includes HTML files and JavaScript. Within this file, there is a function that configures variables. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www ...

javajavascripthtmlspring

The system is currently unable to find the specified element

I am facing an issue trying to locate a button that is defined under a specific class using XPATH. The error message "Unable to locate element" keeps popping up. Here are the details of the class: <div class="aui-button-holder inputBtn" id="aui_3_4_0_1 ...

javascriptselenium

Is there a way to make a string evaluate inline using JavaScript and React?

In my function, the following code works perfectly: console.log(theme.colors.blues[1]); To make the last part dynamic, I tried the following approach: const getColor = (theme, passedColorProp) => { console.log(theme.colors.[passedColorProp]); }; g ...

javascriptreactjs

Await that's locked within a solo asynchronous function

async function submitForm(e){ e.preventDefault() console.log(e.target) try { const response = await axios.post('/api/<PATH>', {username, password}); console.log(response.data); const token = response.data.token if (t ...

javascriptasynchronousasync-awaitaxiosnext.js

Node.js encountering issue with printing an array

Here is the code snippet from my routes file: router.get('/chkjson', function(req, res, next) { req.getConnection(function(err,connection){ var ItemArray = []; var myset = []; var query = connection.query('SELEC ...

javascriptmysqlarraysnode.jsexpress

Error: AngularJS is experiencing an injector module error that has not been caught

I have set up an Angular boilerplate that includes various elements such as meta tags, CDN links, and script tags. However, I am encountering a persistent error in my console and cannot figure out the root cause of it. https://i.stack.imgur.com/qPGby.png ...

javascriptangularjs