The greedy behavior of jquery UI is not behaving as expected

In my current project, I am attempting to place a diamond-shaped item into a droppable area which then generates two sub-droppables for additional items. However, I am facing difficulty implementing the "greedy" function with the newly generated droppables, specifically on the second item - left side when generated. You can view my progress on this jsFiddle.
This is the main dropzone.

            $(".objects").droppable({
            accept: "#block",
            drop: function (ev, ui) {
                $(".test").append('Dropped!');
            }});

This represents the sub-dropzone. Upon dropping an item here, the text 'Dropped123!' should be displayed in the following code block.

          $(".true").droppable({
                greedy:true,
                accept: "#block",
                drop : function (ev, ui) {
                    $(".test").append('Dropped123!');


                }
            });

Answer №1

The issue you're facing is that you're attempting to bind droppable before the elements are actually available. I've made some adjustments to your fiddle so that now the event is bound to the correct element: http://jsfiddle.net/X48k9x2b/11/

                var newDiv = $('<div class="new n_block'+ cloneCount1 +'"></div>');
                $(".n_block"+ cloneCount1 ).append(newDiv); 
                newDiv.droppable({
                    greedy:true,
                    accept: "#block",
                    drop : function (ev, ui) {debugger;
                        $(".test").append('Dropped123!');

                    }
                });

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

What is the best way to choose all checkboxes identified by a two-dimensional array?

I need help with a question div setup that looks like this: <div class="Q"> <div id="Q1"><span>1. </span>Which of the following have the same meaning?</div> <div class="A"><input type="checkbox" id="Q1A1Correct" /& ...

Send a Date Object through an Event Emitter to be used in a Date Picker

I created a personalized Date Picker Child Component, and when the onDateChange event occurs, I intend to send an event to the parent component. @Output() selectedDateChange = new EventEmitter<Date>(); onDateChange($event) { this.selectedDateCha ...

No search results found for Mongoose text search query

Despite using Mongoose 5.7.8 for my app, the text search feature is not yielding any results. Below is a schema/model example: import mongoose, { Document, Schema } from 'mongoose'; import { Moment } from 'moment'; import { IUser } fr ...

Seamless mathematical computations while navigating through Javascript

I have created a basic JavaScript calculator that works efficiently. However, after obtaining the result by pressing the "=" button, I would like the returned result to be saved for future use. The "=" button should be capable of being clicked again to ret ...

Adjust Navbar Header Color Based on Screen Size

I am completely new to front-end development. I am in the process of building my own responsive website using Bootstrap 3. One issue I am facing is that when I resize my browser window to simulate a phone screen, I want the navigation bar color to change ...

The AJAX request fails to trigger following the onbeforeunload event except when the page is manually refreshed

I'm currently working on implementing a solution for handling the onbeforeunload event to display a custom message when the user tries to close the browser tab. I want a prompt like: Are you sure you want to leave this page? (I don't want to use ...

Iterate through each image within a specific div element and showcase the images with a blur effect applied

I have a div with multiple images like this: <div class="am-container" id="am-container"> <a href="#"><img src="images/1.jpg"></img></a> <a href="#"><img src="images/2.jpg"></img>< ...

What is the best way to mix up the images in my memory game?

My JavaScript memory game is functioning properly, but I would like the images to load in a random order. Unfortunately, I'm not sure how to accomplish this. Here is the current setup: var easyImages = ["img/bat.jpg", "img/bug.jpg", "img/cat.jpg", " ...

Creating a persistent sticky element that remains at the forefront in Electron or JavaScript development

Currently, I have a remote desktop control application built on Electron that functions as a desktop app on Mac and Windows, and as a web app on Chrome and Firefox. My next goal is to create a sticky component that remains on top at all times, regardless ...

Applying a class change in Vue.js upon mounting

How can I make a button element with a .hover property trigger the hover animation as soon as the page loads? I want to apply a class to the button when the page is mounted and then remove it later. What is the best approach for this? I considered using a ...

How to prevent checkbox autocomplete from selecting the previously checked value using Jquery Ajax

Working on implementing the "Autocomplete ajax search" feature using Php. Successfully fetching data from the database. Currently, when searching for something, the results with checkboxes are displayed. However, when I search for a text, check a checkbo ...

What is the best way to remove empty arrays from a larger array?

I have successfully managed to extract the array containing the product (filtered by an ID), but I am encountering empty arrays in the output as well. Below is the snippet of code I used for this example: var category = [{ "reference": 'BC-ENF ...

Exploring the process of sending post data and navigating to a URL using AngularJS

I am working on an application using angularjs 1.6 and Java 8. My goal is to send POST data to another application and navigate to the URL that this external application determines. The purpose of my application is to transmit data about a citizen who wan ...

Giving identification to a pair of elements located within the same column

Struggling with assigning IDs to two elements in a single column - a dropdown and a text element. Managed it in the first scenario, but encountering issues in the second one. Seeking assistance on this matter. Scenario 1: <td> <sele ...

Issues with rendering Vue 3 component, visible in the elements tree but not displaying on the screen

Recently, I delved into Vue to update one of my components with the new syntax in order to grasp Vue 3 better. However, after the modifications, the component that had been functioning perfectly before now seems to be failing to render properly. The origi ...

Navigating JSON data with unexpected fields in Typescript and React.js

Looking to parse a JSON string with random fields in Typescript, without prior knowledge of the field types. I want to convert the JSON string into an object with default field types, such as strings. The current parsing method is: let values = JSON.parse ...

An advanced template system incorporating dynamic scope compilation

My project requires a unique solution that cannot be achieved with standard data-binding methods. I have integrated a leaflet map that I need to bind with a vue view-model. While I was able to display geojson features linked to my view, I am facing chall ...

What strategies can I use to prevent the need to create new instances of my service and repository for every

Currently, I am delving into the world of JavaScript using the Express.js Framework. My current learning project involves creating a simple restaurant application to grasp the ins and outs of CRUD operations related to ingredients. I have meticulously craf ...

button click event blocked due to unforeseen circumstances

Recently, I've been attempting to change the CSS properties of a div by triggering a click event. However, no matter what I do, it doesn't seem to be working and it's starting to frustrate me. Can anyone shed some light on why this might be ...

Enhancing the performance of your code by optimizing it using jQuery when a checkbox is either checked or

Looking for ways to optimize a jquery function that toggles a URL parameter based on checkbox status. Any suggestions on how to streamline this code? $('#mapControl').live('click', function(){ var thisUrl = $(location).attr(' ...