Issues with jQuery UI droppable feature not functioning as expected

I'm currently working on developing a form building tool and I've encountered an issue. Initially, everything was functioning correctly - I could drag my first icon and drop it onto the main form body without any problems. However, when I tried to make the dropped panel droppable itself, I ran into issues. Dropping something onto the panel did not trigger any action. Interestingly, if I manually hard-code the div into the panel, it works as expected. This discrepancy has been causing me a lot of trouble in trying to debug.

Below is the code snippet in question:

<html>
    <head>

        <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>

        <style type="text/css">
            #toolbox
            {
                width: 100%;
               ...
            }
        </style>

    </head>

    <body>
    
        ...

    </body>

</html>
javascriptjqueryhtmlcss

Answer №1

Check out this solution for functioning drops. The panel now drops on the form builder, and the table drops on the panels, including newly created ones. Keep in mind that the formbuilder is only the colored area under the toolbar section. If you scroll down too far, dropping may not work unless you scroll back up. This can be easily fixed with a CSS adjustment. Change position:absolute to position:relative for it to expand along with the panels.

function formDropHandler(event, ui) {
    if (ui.draggable.hasClass("pan")) {
        var form = $("#formbuilder");
        form.append('<div class="panel ui-droppable"></div>');
    } else if (ui.draggable.hasClass("tab")){
       alert("TRUE");
    }
}

$(document).ready(function() {
    var icons = $('.icon');

    $('.icon').draggable({
        cursor: 'move',
        helper: 'clone',
        revert: true
    });

    $("#formbuilder").live('mouseover', function() {
        $("#formbuilder").droppable({
            drop: formDropHandler
        });
    });
    $(".panel").live('mouseover', function() {
        $(".panel").droppable({
            drop: formDropHandler
        });
    });
});

Answer №2

Elements that become "droppables" are only those present when you first called .droppable(). Any elements added to the page afterwards are not automatically made droppable unless initialized separately.

To make new additions droppable, simply adjust your append statement as shown below:

var form = $("#formbuilder");
$('<div class="panel ui-droppable"></div>')
    .appendTo(form)
    .droppable({drop: panelDropHandler});

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

Activating a link without clicking will not trigger any javascript functions

I have been attempting to display an image when I hover over a link, but for some reason, the .hover() event is not functioning as expected. Initially, I am just aiming to have an alert pop up. Once I have that working, I can proceed with fading elements i ...

javascriptjqueryhtml

Customize Your AJAX POST URL with Radio Buttons - A Step-by-Step Guide

I'm looking for some guidance on how to use AJAX to change the post URL based on a radio button selection. Do I need to use an if statement or is there another way? var barray = []; function cbutton() { $('input:radio[name="cheking"]:checke ...

javascripthtmljqueryajax

When the content div is clicked within the overlay div, the popup will also close

I want to design a pop-up that features a container with a black background and some opacity, where the content of the popup is placed inside. Here's what I have in mind: <button (click)="showPopup = !showPopup">Open popup</button& ...

htmlcssangularjs

What is the best way to display a particular section of a website (<td>...</td>) within a UIWebView?

I have searched high and low for a solution to my issue, but have come up empty-handed. What I am attempting to accomplish is to only load a specific td from a webpage into a UIWebview. Currently, my code looks like this: - (void)viewDidLoad { [supe ...

htmliosuiwebview

Setting up dynamic routing in AngularJS for links

I am facing some confusion regarding routing in AngularJS. Normally, we can configure routes in angular.config() when the angular module is loaded. At that time, we define static information such as routePath, templateUrl, and controller. However, I am u ...

javascriptangularjs

Utilizing CSS for showcasing XSTL table

I've hit a roadblock with my initial XML project and I need some help. My goal is to create an address book using an XML file containing contact data, which is then transformed in XSLT. While both the XML and XSLT files function correctly, I encounter ...

cssxmlxslt

Conceal the Vue router on a webpage

How can I hide the vue-router from my login page? I want to remove the menu on the Login page. Is it possible and how would I achieve that? Here is the code for the Login page: Login <template> <div> <h1>Login</h1> ...

javascriptvue.jsvuejs2vue-router

Tips for implementing jQuery functions such as lightbox and other features on a page loaded via ajax requests

I have a specific requirement for my page. I designed a section to display various departments, where clicking on $('.getDetails') will reveal a list of employers from each department along with some details. Furthermore, clicking on an employer& ...

jqueryajaxcodeigniter

Issue with ul under li:hover not displaying correctly in IE browser, despite the box shadow still being visible

I'm dealing with a navigation menu that has nested ul li elements. The goal is to have the nested ul displayed only when the parent li element is hovered over. ul#menu_system ul { width:200px; display:none; position:absolute; left:0; top:100%; -moz-b ...

cssinternet-explorer

React failing to refresh in browser following compiler error when saved

Recently starting to work with React, I have observed an interesting behavior. When I create my app using create-react-app, it automatically updates when I save it in VSCode, which is normal. However, I have noticed that as soon as I encounter my first c ...

javascriptreactjstypescriptnpmjsx

The color of the top bar remains unchanged when hovered over

I am struggling to design my personal website, and I can't seem to get the top bar to change color on hover. If you believe you have a solution, please provide your answer. index.html appears to be functioning properly, but perhaps additional adjustm ...

htmlcss

Exploring the capabilities of jQuery in conjunction with HttpHandlers

I'm encountering an issue trying to retrieve HTML from a HttpHandler through jQuery. Below is the jQuery script I am using to call the handler: $.get('http://localhost:56964/LoadComments.axd?storyID=' + storyID ,function(data) { alert(data) ...

asp.netjqueryajaxhttphandler

Tips for adjusting the range slider's increment by selecting a radio button

There are two radio buttons and multiple range sliders available. Each radio button has a distinct value assigned to it. The desired functionality is that when one of the radio buttons is clicked, the maximum value should change (from 12 to 24 or from 24 ...

javascripthtmljqueryradio-button

Retrieving a value from an array at random to assign to a different variable

I have different options for a specific variable depending on the scenario --> var lowSpeed = Math.random() * (45 - 30) + 30; var mediumSpeed = Math.random() * (60 - 45) + 45; var highSpeed = Math.random() * (80 - 60) + 45; var highwaySpeed = Math.rando ...

javascripthtmlarraysrandom

Use jQuery to dynamically add a button to a table row

I have an array of JSON objects in JavaScript that I'm parsing from a JSON formatted string. My current approach involves looping through the array and adding the data to a table on the page. jQuery Code: $.each(objArr, function(key, value) { var ...

javascriptjqueryjson

Ensure that two div elements expand to occupy the available vertical space

I am looking to create a layout similar to the following: |---| |------------| | | | b | | a | |____________| | | |------------| |___| |______c_____| Here is the code I have so far: <table> <tr> <td class="leftSid ...

csshtml-table

Tips for updating the server without having to reload the page using vuejs

I am currently developing a CRUD application using vue-cli and Node.js on the server side. Here is a snippet of the form I have created: <template> <div id="formRoot"> <div class="form" > <form @submit.prevent="sendToTable ...

htmlnode.jsformsvue.jspost

Sending an AJAX request to a PHP file to retrieve data in JSON format

Greetings everyone, I am currently exploring the world of AJAX for sending information to a JSON file and I'm unsure about the structure of the .php file needed to process it. My experience with .php is quite limited. Can anyone guide me in the right ...

javascriptphpjqueryjsonajax

The comparison between form submission and AJAX request when transmitting data in JSON format

Working on a complex PHP/Drupal project, our team is facing the challenge of enabling a deep link into a page that requires extensive data to be passed from the originating site. We have full control over both ends so cross-domain issues are not a concern ...

javascriptphpjsonajaxforms

Problems Arising with Javascript Animation Functionality

I've created a script for an interactive "reel" that moves up or down when clicking on specific arrow buttons. However, I'm encountering two issues: 1) The up arrow causes it to move downward, while the down arrow moves it upward. 2) After exe ...

javascripthtmlcssanimation