Dragging elements in a scrollable div with JQueryUI causes the dragged item to disappear

I am facing an issue while working with JQuery UI-Draggable divs inside a container that has a fixed height and a scrollable y-axis. Whenever I drag the elements outside the container, the overflow-y: scroll rule hides them.

You can view the code on jsFiddle with the overflow-y: scroll setting.

Alternatively, you can view the code on another jsFiddle without the overflow rule.

I came across Prodikl's solution, which involves a helper-clone that is appended to the document body. However, I am looking for a solution that does not rely on a helper-clone. I want the actual div to be visibly moving.

You can see the jsFiddle of Prodikl's solution to my problem to verify that it works.

Here are the methods I have tried:

  • Setting the z-index of both draggable divs to 99999
  • Trying different values for the overflow-x property like visible, auto, initial, and inherit
  • Setting the containment option to .master-container and higher
  • Setting the stack option to .master-container and higher
  • Setting the zIndex option to 99999
  • Combining all the above options simultaneously

Edit:

I had to remove 3 links as I lack the reputation to post more than 2 links.

If you need to access the jsFiddles, you can find them with the ending IDs a68ytmbw/4/ and a68ytmbw/3/, rather than a68ytmbw/2/. Please inform me if I am violating any rules by providing additional references to the jsFiddle.

jquerycssjquery-uijquery-ui-draggable

Answer №1

Utilize the helper as a function in JavaScript to create a new element that is not attached to the div, preventing overflow issues.

JavaScript

$(function() {
  $(".draggable").draggable({
    revert: true,
    helper: function(e) {
      var c = $("<div>", {
        class: "draggable text-style",
        style: "width: 200px; height: 90px;"
      }).html($(e.target).text());
      return c;
    }
  });

  $(".dropzone").droppable({
    accept: ".draggable",
    drop: function(event, ui) {
      $("#dragResult").text("Dropped box #" + ui.helper.text() + " in dropzone");
    }
  });
});

See it in action here: https://jsfiddle.net/Twisty/a68ytmbw/7/

Answer №2

Referencing an answer provided by @Twisty

Utilizing the helper and concealing the parent element during drag-and-drop actions.

$(function() {
  $(".draggable").draggable({
    start: (event, ui) => {
      $(event.target).addClass('hidden-but-present');
    },
    stop: (event, ui) => {
      $(event.target).removeClass('hidden-but-present');
    },
    revert: true,
    helper: function(e) {
      var c = $("<div>", {
        class: "draggable text-style",
        style: "width: 200px; height: 90px;"
      }).html($(e.target).text());
      return c;
    }
  });

  $(".dropzone").droppable({
    accept: ".draggable",
    drop: function(event, ui) {
      $("#dragResult").text("Dropped box #" + ui.draggable.text() + " in dropzone");
    }
  });
});

See the demonstration here: https://jsfiddle.net/hsdzs4jv/

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

Enhance the appearance of div elements in GWT/HTML with custom styling

I am relatively new to GWT and have been exploring various options, but I have not yet found a solution to my issue. The challenge at hand involves developing a function schedule system in GWT, where I am working on designing the frontend. We currently ha ...

javajqueryhtmlcssgwt

What is the best way to include start and end labels on Bootstrap's progress bars?

Is there a way to add start and end labels directly below the progress bar in Bootstrap? Here is an example of what I want: [||||||||------------] <Start Label> <End Label> I have been searching for a solution, but it seems ...

csstwitter-bootstrap

Spinning triangle around central point using CSS

I'm working on a project that includes the following code snippet: body { background-color: #312a50; font-family: Helvetica Neue; color: white; } html, body { height: 100%; } .main { height: 100%; width: 100%; display: table; } .wr ...

htmlcss

Toggle the font weight in a text area by clicking a button

I need help with creating a button that will change the font-weight to bold when clicked and then revert back to normal when un-clicked. However, I only want the specific part of the text area where the user clicks the button to be bolded, not the entire t ...

javascriptjqueryhtmltoggleclass

Refresh only a portion of a page using PHP and JavaScript

I have a webpage set up with multiple sections in separate divs. Currently, the essential divs required are <div id="main">...</div> & <div id="sidebar">...</div> Each div contains PHP code like: <?php include("page.php") ...

phpjavascriptjqueryajax

Tips for implementing code to function across several images in HTML and CSS

Hey there, I'm currently working on a website project for my friend and I sometimes refer to www.w3schools.com for help with coding. I'm having trouble implementing a gallery feature where users can click on images to view them fullscreen. I foun ...

javascripthtmlcss

The file uploader on the HTML page only allows for PNG files to be uploaded

Currently, I am working on an application where I am facing a challenge related to file uploads. Specifically, I have an input field like this: <input id="full_demo" type="hidden" name="test[image]"> I am looking for a way to restrict the upload of ...

jqueryhtmlcssjpeg

Generating a JavaScript object based on an array of keys

I'm currently grappling with a task that is proving to be quite challenging. I have a set of arrays structured like this: ['key1', 'key2', 'key3'] ['key1', 'key2', 'key4'] ['key1', ...

javascriptjqueryarraysjsonpojo

"Printed documents fail to display underlined text using Bootstrap styling

Why do the codes show underlines on the webpage but not in the browser's print? This code is from the printOrder.blade.php file: <!DOCTYPE html> <html dir="ltr" lang="en"> <head> <meta charset="UTF-8&qu ...

cssbootstrap-5

Creating eight equal sections within HTML <div> elements using Bootstrap

I am brand new to Angular. I need to design something like this: https://i.sstatic.net/Zcb9i.png However, I'm struggling to find the right solution. Here is what I have so far: https://i.sstatic.net/7hsrk.png. Having been a backend developer, I&ap ...

htmlcssangularbootstrap-5

Updating the value of a textbox on a child page using a master page

I have a jQuery code snippet that successfully detects barcode scans and inputs the data into a textbox on a child page. Currently, this code is located on the child page: <script type="text/javascript" src="Scripts/jquery-2.1.4.min.js">< ...

jqueryasp.netmaster-pagesjquery-callback

pressing the button again will yield a new outcome

I am looking to disable a button (material ui) when it is clicked for the second time by setting disabled={true}. Unfortunately, I have not been able to find any examples related to this specific scenario on StackOverflow. <Button onClick={this.s ...

javascripthtmlcssreactjstypescript

What's the reason behind CSS transitions starting with a black background?

When I apply a transition to the heart, it inexplicably turns black at the start of the animation before displaying the intended gradient effect. Below is the code snippet: .heart { font-size: 2.5rem; padding-right: 2rem; } .heart:hover ...

htmlcss

Unable to choose the div element with id ":1"

Just starting out with web development, and I have a div element with the following attributes: <div class="" id=":1" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" aria-labelledby=":1.label" aria-setsize="10" aria-posinset= ...

jqueryhtmlcssjquery-selectorscss-selectors

Icon that can be clicked before

I'm struggling to figure out how to make the link icon in my code clickable so that users can click anywhere within the card to navigate to another page. I experimented with (" attr(href) ") but it resulted in adding the URL text next to the ...

htmlcsspseudo-element

The most recent update of Blink does not support the complex selector :nth-child(2):nth-last-child(2){}

There is an unusual issue: after a recent update, the selector .groups .group:nth-child(2):nth-last-child(2){} suddenly stopped working. However, it still works perfectly in Webkit and Gecko browsers. Any thoughts on how to resolve this? Snippet of HTML ...

csswebkitcss-selectorsblink

Canceling a request on timeout using Ajax/jQuery

Beginner - Inquiry - Issue at hand: In scenarios where there are lingering open connections not closed by XMLHttprequest, the goal is to terminate them. Within a javascript file handling Ajax calls, the objective is to initiate a timer for each call and ...

jqueryajaxabort

What steps can be taken to resolve the issue of Ajax not retrieving any data from

I'm struggling to identify the error in this code. I have created a search bar and implemented AJAX to automatically fetch data. Here is the HTML file: <!DOCTYPE html> <html> <head> <title></title> <script ...

javascriptphpjqueryhtmlobject

What could be causing my AngularJS to malfunction on this particular website?

I am currently learning AngularJs and practicing some coding. However, I am facing an issue where the javascript code does not work when I run it on my browser (Chrome/IE). The "{{product.like}}" code is not functioning as expected. Is there any specific d ...

javascripthtmlcssangularjs

Animating scrollTop using jQuery is a useful feature for creating

I am facing an issue with several section tags within a div that has overflow set to hidden. The structure of the code is as follows: <div id="viewport"> <section> content </section> <section> content </ ...

javascriptjqueryanimationscrolltop