The Droppable feature in jQuery/jQueryUI molds itself to match the shape of the Dragged

In my current setup, I am working with a single column table where each cell is a droppable element that only accepts draggables of a specific class. While the borders of the table are visible, I am not a fan of the fixed size and colored cells within, as they do not look visually pleasing to me. My goal is to have the cells highlight when a draggable intersects with them, mirroring the size of the draggable itself. The challenge lies in the fact that the draggables have fixed width, but varying heights. Adapting the height accordingly is the key, but I am unsure of where to even start. If you need a visual reference, please check out this example for more insight into the adaptation I am aiming for.

Answer №1

My suggestion for your needs is to utilize jQueryUI's "Sortable" feature instead of Draggable/Droppable. Check out the portlets demo on the jQueryUI website to see if it fits your requirements.

Update: @Subhamoy, I now understand your point. Here's a solution that incorporates Sortable and depends on CSS for table construction: Access the jsfiddle link

The crucial part is the 'over' handler, which manages placeholder resizing:

$( ".target .tbody" ).sortable({
    forcePlaceholderSize: true,
    placeHolder: "ui-sortable-placeholder",
    connectWith: ".source .tbody",
    items: "> .tr",
    over: function(event, ui) {
        var $context = $(this)
            ,$h = ui.helper
            ,$p = $('.ui-sortable-placeholder', $context)
            ,hheight = $h.height()
        ;
        $p.removeAttr("style");
        $p.css("height", hheight + "px");
    }
});

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

Mobile viewing causing problems with website buttons functionality

While my website functions perfectly on desktop, I am facing an issue where the buttons are not working when accessed through mobile devices. Interestingly, these buttons were operating fine in a previous version of the site. Although I have made minimal ...

The utilization of Server.Execute leads to inaccurate HTML rendering exclusively on IE9

Issue - I am encountering a problem with the rendering of a page in different versions of Internet Explorer. The page contains multiple nested div elements, and when calling server.execute within one of the child divs, the output is being displayed incons ...

Submitting Multi-part forms using JQuery/Ajax and Spring Rest API

Recently, I started exploring JQuery and decided to experiment with asynchronous multipart form uploading. The form includes various data fields along with a file type. On the server side (using Spring), I have set up the code as follows: @RequestMapping ...

Is there a way to dynamically insert page breaks in jspdf to ensure that tables do not split across multiple pages?

I am currently working on developing a website that can generate PDFs from database information, using PHP and MySQL to create tables with variable lengths. Sometimes, these tables may even span across multiple pages. If the first table takes up too much ...

The functionality of responsive images is not functioning as intended within the Bootstrap framework

I'm currently working on troubleshooting a code issue. I am trying to implement a responsive image using Bootstrap, but it seems to not be functioning correctly. How can I go about resolving this problem? <header class="masthead text-center text-w ...

What method can I use to update the content of a textbox using JQuery?

Currently, I have a script in place that successfully alters the value of my textbox as needed. However, I am looking for ways to enhance this functionality even further. var total = 0; // adds a decimal and 2 zeros $('input:checkbox:checked').e ...

An issue occurred while the request was being transported or processed, resulting in Error code 10 at Path /wardeninit

Currently, I am attempting to pass an object (specifically the contents of a row from a sheet) to an apps script template. The screenshot displays the actual row. https://i.stack.imgur.com/IzMrn.png The function in my apps script consists of the followin ...

"Utilizing a Font Awesome icon within the dropdown list of a combobox in Ext JS

I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...

Trouble with Two Divs Layout

My website layout includes links on the left side of the page within a floating div, with content on the right side in another floating div. However, I'm facing an issue where the content moves below the links when the page is resized. I attempted to ...

How to Place a Button Halfway Out of an Angular 5 Material Dialog

Is there a way to place a close button on the top right corner of a dialog box, partially inside and outside the dialog like shown in this image: I attempted using absolute positioning to achieve this, but that solution is not ideal. I want to position t ...

get data from a JSON array with no specific name on the provided URL

Struggling to extract specific values from a JSON file located at the following URL: The content of the URL data is as follows: [ { "key":{ "parentKey":{ "kind":"user", "id":0, "name":"test 1" }, ...

What is the best way to ensure an SVG maintains a fluid width while keeping its height constant?

My goal is to achieve the following: The SVG should dynamically scale its width to occupy 100% of the container's width. The SVG should either stretch or compress when the container's width changes, specifically affecting the wave drawn wit ...

A function that listens for the onmouseover event and updates the image source of an HTML img element

I have created a function that positions my objects based on the array they are assigned to. For example, if they are in players[0], they will be placed in one position, and if they are in players[1], they will be placed elsewhere. The X and Y values are ...

What is the reason behind the change in size and shape of the text when using "overflow: hidden"?

Check out this interactive demo using the provided HTML and CSS: You can view the demo by clicking on this link. /*CSS*/ .header { margin: 0px; padding: 0px; width: 100%; } .headertable { padding: 0px; margin: 0px; width: 100%; border-sp ...

Matching Figures to their Descriptions

I am currently working on a website and looking to include images with captions that display the price of each item underneath. The issue I'm facing is that the captions are aligning horizontally instead of vertically. Can anyone provide assistance wi ...

Adjust image loading according to screen dimensions

I am working on HTML code that currently displays an image. The code looks like this: <div> <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" /> </div> My goal is to show a different image based on the screen si ...

How can we match the ID from the URL with the one stored in the database in order to display data specific to that particular ID in this code?

I'm currently working on a code snippet in the controller that displays a list of vacations for a specific employee based on their ID. public JsonResult GetVacationList(int? Id) { db.Configuration.ProxyCreationEnabled = false; List<Vacatio ...

Conceal the countdown clock and reveal the message box

I am attempting to create a functionality where the text box will replace the timer when it reaches 0, and then the timer will be hidden. I am seeking a straightforward solution using either the 'v-show' or 'destroy' property in vue.js ...

Comparing and highlighting words in strings using JavaScript

Seeking assistance with comparing and styling words as shown in the image below: https://i.stack.imgur.com/Ffdml.png I attempted using JavaScript for this task but have not been successful so far. <div class="form-group"> <div class="col-md ...

Is there a way to modify the commandlink image when the mouse hovers over it in PrimeFaces?

After implementing this code snippet, my commandlink seemed to vanish into thin air. Upon inspecting it with firebug, I discovered that it was present but had a size of 0 x 0 px. .myNewButton { width: 50px !important; height: 50px !important; background ...