Utilizing Jquery for draggable/droppable functionality in combination with custom overflow styles

Encountering a challenge with a drag and drop system that utilizes CSS overflow properties to enable vertical scrolling of a list of values. The issue arises when dragging an item between selected and unselected areas, causing the dragged item to disappear outside the overflowed element, regardless of the specific value set.

A demonstration showcasing the problem can be accessed via: https://codepen.io/richardsmorgan/pen/NWYodYy

HTML

<div class="drag-area">
  <div class="area">Droppable Area 1</div>
  <div class="box">Box1</div>
  <div class="box">Box2</div>
</div>
<div class="drag-area">
  <div class="area">Droppable Area 2</div>
</div>
<div class="result">-</div>

CSS

.drag-area {
  width: 200px;
  height: 200px;
  background: #fff;
  display: inline-block;
  overflow-x: visible;
  overflow-y: scroll;
  
  vertical-align: top;
  position: relative;
  margin-left: 30px;
  border: 1px solid #ddd;
  box-shadow: 3px 3px 6px 3px rgba(0,0,0,0.06)
}
.area {
  position:absolute;
  margin: 0 auto;
  color: #ccc;
  font-size: 20px;
  bottom: 10px;
  left: 20px;
}
.box {
    width: 50px;
    height: 50px;
    background: #673AB7;
    color: #fff;
    text-align: center;
    z-index: 2;
    border:2px solid #512DA8;
  
}
.result {
  display: inline-block;
  margin-left: 30px;
}

JAVASCRIPT

$( ".box" ).draggable({
  scope: 'demoBox',
  revertDuration: 100,
  start: function( event, ui ) {
    //Reset
    $( ".box" ).draggable( "option", "revert", true );
    $('.result').html('-');
  }
});

$( ".drag-area" ).droppable({
   scope: 'demoBox',
   drop: function( event, ui ) {
     var area = $(this).find(".area").html();
     var box = $(ui.draggable).html()     
     $( ".box" ).draggable( "option", "revert", false );
     
     //Display action in text
     $('.result').html("[Action] <b>" + box + "</b>" +
                       " dropped on " + 
                       "<b>" + area + "</b>")
     
     //Realign item
     $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
   }
})

In search of a solution to address this issue or whether it is fundamentally flawed?

Answer №1

Take a look at this illustrative example.

$(function() {
  $(".box").draggable({
    appendTo: "body",
    helper: "clone",
    scope: 'demoBox',
    revertDuration: 100,
    start: function(event, ui) {
      $(this).css("visibility", "hidden");
      $('.result').html('-');
    }
  });

  $(".drag-area").droppable({
    scope: 'demoBox',
    drop: function(event, ui) {
      var area = $(this).find(".area").html();
      var box = $(ui.draggable).html()
      $('.result').html("[Action] <b>" + box + "</b>" +
        " dropped on " +
        "<b>" + area + "</b>")

      //Realign item
      $(ui.draggable).detach().css({
        top: 0,
        left: 0,
        visibility: "visible"
      }).appendTo(this);
    }
  })
})
.drag-area {
  width: 200px;
  height: 200px;
  background: #fff;
  display: inline-block;
  overflow-x: visible;
  overflow-y: scroll;
  vertical-align: top;
  position: relative;
  margin-left: 30px;
  border: 1px solid #ddd;
  box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, 0.06)
}

.area {
  position: absolute;
  margin: 0 auto;
  color: #ccc;
  font-size: 20px;
  bottom: 10px;
  left: 20px;
}

.box {
  width: 50px;
  height: 50px;
  background: #673AB7;
  color: #fff;
  text-align: center;
  z-index: 2;
  border: 2px solid #512DA8;
}

.result {
  display: inline-block;
  margin-left: 30px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="drag-area">
  <div class="area">Droppable Area 1</div>
  <div class="box">Box1</div>
  <div class="box">Box2</div>
</div>
<div class="drag-area">
  <div class="area">Droppable Area 2</div>
</div>
<div class="result">-</div>

If you prefer not to duplicate the element, you have the option to detach it from the parent in the Start function or utilize the helper options.

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

Whenever I nest my div tags within another div element in an HTML document

Whenever I try to position a div inside another div using float, I encounter problems. <div id="main"> <div id="anotherDiv"> <h1>Test</h1> </div> </div> Here is the corresponding style sheet: #main{ ba ...

Two divs positioned on the left side and one div positioned on the right side

Hey there, I am attempting to align 2 divs on the left side with one div on the right. #div1 #div2 #div1 #div2 #div3 #div2 #div3 #div3 The challenge is to have #div2 positioned between #div1 and #div3 when the browser window is resized smaller. Currentl ...

Upon the second access, unbind the Ajax Autocomplete and throw the jQuery Simplemodal

Currently, I am utilizing jQuery simplemodal to trigger a popup form that features AJAX autocomplete inputs. Upon the initial opening of the modal, these autocompletes function properly. However, after closing and reopening the modal, the autocomplete in ...

Adjust the visual presentation based on the chosen option at the top of a column JQchart

Can anyone offer assistance with creating three radio button fields that will display yearly, monthly, or weekly data on a column chart? I have searched through numerous examples in JQchart but haven't found one for this specific scenario. Are there o ...

JavaScript Regex: Removing all characters that are not numbers

There have been several inquiries about this particular question, such as this one on Stack Overflow. Despite my efforts to replicate the solution and research regex, I can't seem to get it to work: $("#button").click(function () { new_number = $ ...

City-based Address Suggestions with Google API Places

I have been struggling to find a solution to this specific issue without any luck. Your assistance would be greatly appreciated. Currently, I am attempting to implement autocomplete address functionality using Google API with the following code: var inpu ...

Can someone help me figure out how to trigger my function after my jQuery 'each' function has completed along with all the AJAX calls it includes?

Hello all, seeking some guidance here. I have experimented with various solutions from SO and other sources. This particular one caught my attention as I tried to ensure that my function wouldn't execute until all ajax calls were completed. However, I ...

The best method for quickly loading a webpage that is over 20MB in size

My website is a single-page calendar featuring a full year's worth of images. With 344 requests and a total load size of 20MB, the page consists of a simple PHP script without a database. The requests include a CSS file (15KB), 4 JS files (20KB), two ...

The <p> element nested inside a <div> element with font-weight styling

I'm struggling to make a large font size and weight fit into a div tag while aligning it vertically at the bottom. Can anyone help me with this issue? div { border:1px solid black; height:100px; } table { border:1px sol ...

How can you ensure that the Data Point Values are always displayed when using arrayToDataTable in the Google Charts API?

Just wanted to clarify that even though there is a similar question titled: Google Charts API: Always show the Data Point Values in Graph ...on this website, I am facing difficulties implementing its solution because my chart is using arrayToDataTable. ...

Having trouble with $.ajax? I can't seem to get it to hit my controller action. Can anyone provide

Seeking assistance. I need help with the following code snippet: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script type="text/javascript> function GOTO() { var datastring = "id=2"; $. ...

To achieve the desired format, where should I press or manipulate the information?

I need help with manipulating arrays to generate a specific JSON file structure. I've made some progress but got stuck at this point: var T_nn_IN = document.getElementById('datatablenewname'); var tabledata_newname_initialname = []; ...

"Embrace the power of Ajax and JSON with no regrets

function register() { hideshow('loading', 1); //error(0); $.ajax({ type: 'POST', dataType: 'json', url: 'submit.php', data: $('#regForm').serialize(), su ...

What are the steps to create a unique popup div effect with jQuery?

Upon clicking the icon on this page, a mysterious div appears with information. I'm completely baffled by how they achieved this cool effect using css/jQuery tools. Can anyone shed some light on the mechanism behind this? ...

Overcomplicating div elements with unnecessary cloning during checkbox usage

Whenever I check the checkbox and press OK, I want to clone a div with specific user details. Everything works as expected when selecting multiple users. However, adding more users without unchecking the previous checkboxes results in cloned buttons but no ...

Comparing CSS rules: the faster option between specifying multiple IDs or not

Recently, I have been heavily involved in working with Concrete5. It has come to my attention that the default theme contains numerous CSS rules that are defined in this manner: #page #central #sidebar p{line-height:24px} Considering that "sidebar" is an ...

MUI: Interaction with a button inside a MenuItem when not interacted with MenuItem itself?

Currently, I am utilizing MUI's Menu / MenuItem to create a menu of missions / tasks similar to the screenshot below: The MenuItem is interactive: // ... other code <MenuItem value={mission.issueIdentifierId} sx={{px: ...

Increase the date and time by a specified number of days

After searching for solutions on how to add a specific number of days to a given date, I came across various methods. However, my requirement is to add days to both Date and Time in the format MM-DD-YYYY HH:MM:SS. I attempted a method which worked fine wh ...

NPM Datatable Excel export button not appearing

My Excel Button in the data table is not showing up. I've imported all scripts using NPM, and all other buttons work perfectly fine (like PDF, Copy, Print). But specifically, the Excel button doesn't seem to be working. Here are my imports: imp ...

Guide on utilizing jQuery to read and insert a local HTML file directly into a textarea

What is the best way to load a local HTML file in raw format and insert it into a textarea using jQuery version 1.3? ...