Unable to drag and drop onto every part of a div element that has undergone a CSS transformation

Having trouble implementing a Drag & Drop feature. The droppable div is styled with CSS transformations, but the draggable div doesn't drop correctly on the right part of the box.

If you'd like to take a look at the code and try it out yourself, here's a simplified version along with a jsFiddle link: https://jsfiddle.net/t5e2qvgt/8/

$("#draggable").draggable();
$("#droppable").droppable({
  drop: function(event, ui) {
    $(this)
      .addClass("ui-state-highlight")
      .find("span")
      .html("Dropped!");
  }
});
#draggable {
  width: 50px;
  height: 50px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}

#droppable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: right;
  margin: 10px;
}

.droptarget {
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -moz-transform: skew(45deg, 0);
  -ms-transform: skew(45deg, 0);
  -o-transform: skew(45deg, 0);
  -webkit-transform: skew(45deg, 0);
  transform: skew(45deg, 0);
}

.droptargeticon {
  -moz-transform: skew(-45deg, 0);
  -ms-transform: skew(-45deg, 0);
  -o-transform: skew(-45deg, 0);
  -webkit-transform: skew(-45deg, 0);
  transform: skew(-45deg, 0);
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="droppable" class="droptarget ui-widget-header">
  <div class="droptargeticon">
    <p>Drop here</p>
  </div>
</div>
<div id="draggable" class="ui-widget-content">
  <p>Drag</p>
</div>

Answer №1

Seems like the content-box of the element is not being transformed correctly due to a flaw in the browser implementation. The assumption that the browser understands the new transformed context box is incorrect.

$('#droppable').outerWidth() // 189

It's clear that the width exceeds 189, as a matter of fact, 189 represents the width of the element without the skew transform

The position does change

// With transform
$('#droppable').position(); // { top: 0, left: 189 }

// Without transform
$('#droppable').position(); // { top: 0, left: 357 }

The transform only seems to alter the position to the upper left corner of the skewed element in the DOM, without changing anything else, thus it does not accurately reflect the shape of the visible element.

This issue may be a limitation within the browser and the DOM that cannot be resolved :(

Regardless of using raw JavaScript or jQuery, the outcome remains the same, indicating that the problem lies beyond jQuery.

An alternative approach could involve creating a wrapper around the droppable area and placing the skewed element inside it, although this would result in a larger square drop target.

UPDATE

I have reported this issue as a bug to Chromium, you can view the discussion. Essentially, they advised me to request standardization from the W3C so that it can be implemented across all browsers. I'm not pursuing that route, but feel free to do so on your own.

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

Guide to positioning a div at the bottom of a Drawer while maintaining the same width as the Drawer in React Material UI

Creating a Drawer on the right-hand side using <Drawer/>, I am trying to make a <div> stick to the bottom of the <Drawer />. The width of this <div> should match the width of the <Drawer />. Desired Outcome: To achieve the d ...

Error encountered while invoking web server method in C# through ajax resulting in a 500 Internal Server Error

Occasionally encountering a 500 internal server error when calling a server method from an AJAX request has left me perplexed. The inconsistency of the issue, sometimes working fine and sometimes not, is baffling. To add to the confusion, no changes were m ...

Interface similar to Amazon that allows users to easily choose product size and color by clicking on the desired options (e.g., clicking on a small red box to select a

For my e-commerce website, I am looking to create a user-friendly interface similar to that of Amazon for selecting product size and color. Instead of traditional radio buttons, I want to display a grid of small boxes, each representing a different color o ...

Can you modify a WordPress/WooCommerce title written in uppercase to display in proper capitalization?

My current project is centered around WordPress and utilizes WooCommerce as its e-commerce platform. I recently migrated products from an old site where the product titles were written in uppercase. At the moment, my HTML code for the product titles looks ...

What are the steps for implementing timezone-js?

I found a project on GitHub that claims to convert one timezone to another. I've been trying to get it to work without success. After downloading and extracting the files, I created an HTML file with the following code: <html xmlns="http://www.w3. ...

Bizarre Drop-down Peculiarities

Having a perplexing issue where the 'search' list item is oddly shifted below the dropdown box only when it is displayed. The other list items remain in their correct positions. Any advice on how to resolve this? The appearance and functionality ...

Eliminate a specific element from the dataset

My question revolves around a data array used to populate three drop down <select> boxes. How can I eliminate duplicate values within the drop downs without affecting the array itself? For example: data = { firstbox_a: ['grpA_1','gr ...

Error encountered while using Jquery's .each() method on a DOM element and attempting to

Trying to utilize the each() function on my DOM to dynamically retrieve a field, I encountered an issue with the following code: var new_entry = new Object(); $('div[name="declaration-line-entry"]').each(function () { new_entry.name = $(this ...

In Javascript, the DOM contains multiple <li> elements, each of which is associated with a form. These forms need to be submitted using AJAX for efficient

I have a list element (ul) that includes multiple list items (li), and each list item contains a form with an input type of file. How can I submit each form on the change event of the file selection? Below is the HTML code snippet: <ul> ...

Verifying user input with JQuery's $.post function

I have a question regarding asynchronous calls. My goal is to validate whether a given "code" is valid without refreshing the page. Here's the scenario in brief: I need to determine if a variable should be set to true or false based on the response ...

using javascript to change a link's state with a click action

I have a question that is related to the topic discussed here: Making a link stay active displaying hover effect upon click using javascript. I am looking for a way to disable the active class when the same link is clicked again. Any assistance on this mat ...

The name 'Landbot' cannot be located. Have you meant to type '_landbot' instead?

I'm currently in the process of integrating Landbot into my React.js application with TypeScript. I'm following this [doc] 1. However, I'm facing an issue where the code inside useEffect (new Landbot.Container) is causing an error. 'C ...

Display Image After Uploading with AJAX

After spending nearly 3 hours working on implementing file uploads via AJAX, I have finally managed to get it up and running smoothly. Take a look at the code below: View <div class="form-horizontal"> <div class="form-group"> @Htm ...

What is the best way to implement a CSS transition for styles that are dynamically created by React?

I have a situation where I am using a button component that is styled based on a theme provided by a context: The code in Button.js looks like: () => { const theme = useContext(themeContext); // { primaryColor: "blue" } return <button className ...

Set each item to its original position on the draggable container

I am working on a project where I have categories with lists of contacts. Each contact has user details displayed in a table with input elements. I have made the contacts draggable and the categories droppable. When moving a contact from one category to an ...

What is the best way to identify a specific list item from a dropdown menu and determine its position on

Check out my jsfiddle for reference. My goal is to calculate scores based on different options selected, specifically relating to radiation types. I'm struggling with assigning a score to each type of radiation and integrating the drop-down menu selec ...

Adding rows to a database can be done by utilizing a dynamic form that consists of both repeatable and unique fields

Here is my follow-up post addressing the issue I previously encountered. Initially, I erroneously used mysql instead of mysqli, but I have now made the necessary updates based on recommendations. I have a form that contains variable sets of fields (rangin ...

Leaving the "OK" button untouched in the sweet alert dialog

While implementing sweet alert in my project, I encountered an issue where the button text was not changing and the cancel button was missing on some pages. On certain pages, it only displayed OK. You can see a screenshot below for reference. https://i.s ...

Creating an HTML5 input field with the type "datetime-local" that works seamlessly in Firefox

Currently, I am incorporating HTML5 date and time input fields within an AngularJS-based interface: <input type="datetime-local" ng-model="event.date_time.start" /> <input type="week" ng-model="event.date_time.start" /> However, my goal is to ...

What is the best way to adjust the height and width of a div when it comes into view through scrolling?

How can I automatically and frequently change the size of my div when it is scrolled into view? HTML <div id="contact" class="fadeInBlock"> <div class="map"> <div class="pointer"> <div class="dot"></div& ...