What is the process for defining an outcome when a draggable element is placed into a droppable area using Jquery?

Currently, I am working on a task where I need to increase the value of a counter (var counter = 0;) every time a draggable image is dropped into a dropzone, which is also an image rather than a div.

$( "#goldbag" ).draggable({ revert: "invalid", containment: "parent" });
$( "#jack2" ).droppable({
    drop: function(event, ui) {
        draggedObj = ui.draggable.attr('id'); 
        $("#"+draggedObj).fadeOut(function() { $(this).remove(); });
        $( "img" ).draggable({ disabled: true });
    }
});

The current functionality of this code is that it makes the droppable image fade out when dropped on the target. However, I aim to increment the counter by 1 before or after the image fades out.

Please note that both #goldbag and #jack2 are images represented as <img> elements within a shared parent container div.

javascriptjqueryhtmlcssjquery-ui

Answer №1

If you want to enable the ability to drag and drop an item multiple times while incrementing a counter, you can simply extend your drop callback function. Here's a basic example to demonstrate this functionality.

This code snippet is adapted from the official jQuery UI documentation available at: https://jqueryui.com/droppable/#default

$(function() {
  var $counter = $("#counter");
  var count = 0;
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
      count++;
      $counter.html(count);
    }
  });
});
#draggable {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}
#droppable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
}
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>


<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

<p>Counter: <span id="counter">0</span>
</p>

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

Steps for running the function saved in variable `x`, with the value `function(){alert('a')}` assigned to it

How can I achieve this using javascript? var x = 'function(){ ... }' x = x.toFunction(); x(); Previously, I used var x = '...'; eval(x), but I have learned that this method is inefficient and slow. To provide some context, my goal is ...

javascriptangularjs

Struggling to interpret JSON data from an AJAX call using jQuery in a Python/Flask application

Currently, I am attempting to analyze a POST request sent via AJAX using jQuery in a python script. The structure of the request is as follows: request.js function get_form_data($form){ var unindexed_array = $form.serializeArray(); var indexed_ar ...

javascriptjquerypythonjsonajax

Multiple variable evaluation in Javascript does not function properly

Currently, I have an array that I am looping through in order to create variables. The variable names are derived from the array itself and I am using eval (only on my local machine) to achieve this. Interestingly, I can successfully create a variable and ...

javascriptdynamicvariableseval

Having trouble with VueJS ref not preventing the default form action on submit?

Within my <script> tag, I currently have the following code: render(createElement) { return createElement("form", {ref: "formEl" , on: {submit: this.handleSubmit} }, [ <insert create form inputs here> ]); } handleSubmit(e) { ...

javascripttypescriptvue.jsvuejs2vue-component

Error in background request for Chrome app/extension, or problem allowing app to access Google Docs API

I'm encountering an issue where the Google Doc API is not allowing a desktop application to be installed, although this worked fine in Chrome 27.0 previously. Below is my Manifest.Json file: { "name": "__MSG_extName__", "description": "__MSG_ext ...

javascriptjsongoogle-chromegoogle-chrome-extensiongoogle-chrome-app

Searching in Datatables for an exact string using regex (not just a substring)

Suppose I have a table with three rows. One of the columns contains these values: coach Assistant Coach Coach assistant coach Coach Currently, when I search for "coach", all rows are returned. However, I want more control over the search results and re ...

jqueryregexdatatablesdatatables-1.10

Change to JSONArray using angularjs

Here is a json object: "values": [ {"name": "name1"}, {"name": "name2"}, {"name": "name3"} ] I want to convert it into this format: values: ["name1", "name2", "name3"]; Can this conversion be done in AngularJS or any other JavaScript functi ...

javascriptarraysangularjs

Converting JSON data into a JavaScript array and retrieving the array through an AJAX request from PHP

Currently, I am working on a project where I have created a function named AjaxRequest to manage all my AJAX requests. While making the requests is not an issue, receiving and placing the data back onto the page has proven to be quite challenging. Within ...

javascriptphphtmlajaxjson

Adjusting font sizes for both multiline text within a <p> element and labels based on the number of lines

Whenever I have multiline paragraphs or labels, the font size seems to adjust depending on the number of lines. All I want is to keep the font size consistent regardless of the lines. The labels all have the same CSS styling and inheritance. Here is a vis ...

htmlcssasp.net

Design a personalized .OBJ / .MTL file and showcase it using the power of three.js

I attempted to create a basic blender model, export it to .obj/.mtl, and then render it with three.js. However, I am experiencing an issue. I have downloaded and uploaded the official three.js demo, and the objmtl-loader is functioning properly with the or ...

javascriptthree.jsexportblender

KnockoutJS - Struggling to bind model from simple JSON array

I've been working on an application that relies on a static JSON array, without the support of a backend service. I've been attempting to bind this JSON array to the page using KnockoutJS. Although I can successfully load the JSON array and creat ...

javascriptarraysjsonknockout.js

Steer clear of duplicating patterns in vue templates

I have a significant issue with a component that needs to be repeated multiple times in the parent template due to the usage of v-if. The component code is as follows: <SelectCard v-for="(channel, index) in category.visibleChannels" :key="index + & ...

javascriptvue.jsvue-component

What are the steps for updating an NPM package that was installed from a Git repository?

I'm struggling to understand how to update a package that was installed from a git repository. Let's say I have a package located at git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b3bda094b3bda0b8b5b6fab1 ...

javascriptnode.jsnpm

Could anyone provide assistance with creating responsive CSS styles for a website?

I am currently utilizing Drupal for my website. In my kickstart sub theme, which is a subtheme of omega, I have added a sitename and slogan. Additionally, I inserted a telephone number through the branding.tpl.php file. However, when I resize the window, t ...

cssdrupalresponsive-designthemesstylesheet

Issue: encountered a write EPIPE error while attempting to transfer a file to FTP via gulp

Whenever I try to deploy some stylesheets to a server using FTP, I encounter an error about 80% of the time. Here's the specific error message: Error: write EPIPE at _errnoException (util.js:1022:11) at WriteWrap.afterWrite [as oncomplete] (net.j ...

javascriptnode.jsftpgulpvinyl-ftp

Angular 17 | Angular Material 17.3.1: Problem encountered with Angular Material form field focus and blur event handling

I attempted to apply (blur) and (focus) effects to my mat-form-field input field, but it seems like they are not working properly on my system. Here is a code snippet that resembles what I am using: html file <form class="example-form"> ...

htmlangulartypescriptangular-materialangular17

Combine two scope arrays in AngularJS

Is there a way to merge two arrays of scope in AngularJS within my controller so that I can display them in a single table? The merging would be based on a common field present in both arrays, similar to an SQL join operation where data from both tables ...

javascriptangularjsangularjs-scope

Authentication - The success callback of $http is executed rather than the error callback

I seem to be facing an issue with authentication in a MEAN stack app, possibly due to my limited understanding of promises and the $http's .then() method. When I try to authenticate to my backend Node server with incorrect credentials, the success cal ...

javascriptangularjsauthenticationjwtangular-http-interceptors

How do I directly display a variable in index.html using node.js?

Is there a way to retrieve user inputs from the index.html file, process them in Node.js, and then display the result back on the index.html page instead of redirecting to a new page? Form Handling with Express var express = require('express'); ...

javascripthtmlnode.jsexpress

Exploring the money library in typescript after successfully installing it on my local machine

I've been struggling to set up a new library in my TypeScript project for the first time, and I can't seem to get it functioning properly. The library in question is money. I have downloaded it and placed it in the root of my project as instructe ...

javascripttypescript