Is it possible for my JQueryUI draggable items to smoothly transition into a different overflowing element?

Question

Is it possible for my JQueryUI draggable items to smoothly transition into a different overflowing element?

On my iPad, I have two scrollable areas where I kept the overflow to auto, scroll, or hidden to allow scrolling. One section contains unenrolled students, and using JQueryUI with touchPunch, I can drag a student from the unenrolled bin into their appropriate class.

However, there is an issue when I set the overflow to allow scrolling. I believe I may need to remove the element from its parent before dragging it, and then append it back to the droppable container upon drop.

You can see this in action on JS Bin here: http://jsbin.com/aPaHiVi/3/edit

This contains 1 working example and 1 not-working example

I'm unsure how to override the default draggable code to achieve two things:

Set the dragged element to the same position but as a child of its parent's parent
Place the element as a child of the dropped container in the correct position

Any guidance on this matter would be greatly appreciated!

Thank you for taking the time to read this

javascript jquery css jquery-ui draggable

Answer 1

Answer №1

Here is a helpful tip for you:

Include the following CSS code in your stylesheet:

.nooverflow{overflow:visible;}

Additionally, add this JavaScript code within your ready function:

$('o').draggable({
    start:function()
    {
        $(this).parent().addClass('nooverflow');              
    },
    stop:function()
    {
        $(this).parent().removeClass('nooverflow');            
    }
});

Answer 2

Here is a helpful tip for you:

Include the following CSS code in your stylesheet:

.nooverflow{overflow:visible;}

Additionally, add this JavaScript code within your ready function:

$('o').draggable({
    start:function()
    {
        $(this).parent().addClass('nooverflow');              
    },
    stop:function()
    {
        $(this).parent().removeClass('nooverflow');            
    }
});

Is it possible for my JQueryUI draggable items to smoothly transition into a different overflowing element?

Answer №1

Similar questions

PHP not cooperating with AJAX POST method, only GET is functioning as intended

Tips for utilizing the GROUP BY Clause in Sequelize along with associations

The Slide Out Menu functioned properly in HTML, but it seems to be malfunctioning when implemented in PHP

The parseFloat function only considers numbers before the decimal point and disregards

Encountering issues with implementing bootstrap-datepicker on cloned rows, as the values remain locked to the first date field

if this.className includes Ajax completion

Issues arising during the initialization of Tinymce

Is there a way to access the variable value chosen from a select dropdown inside a function and then assign it to a JavaScript variable outside of the function?

Struggling with consolidating values in an array of objects - seeking assistance with Javascript

Tips for organizing an object according to specific attributes

Trigger is not activated by dynamically created element

The JavaScript for loop using .appendChild() is inserting the values of the final object, represented as [object object], into the HTML document

Using Flexbox to center items is leading to content overlapping

What is the best way to design a polygon-shaped responsive div?

Protractor - I am looking to optimize my IF ELSE statement for better dryness, if it is feasible

Tips for creating JSON using AngularJs to store tabular information

Leveraging Nextjs Link alongside MUI Link or MUI Button within a different functional component (varieties)

Creating an email body using css and html from a file on Android - how can it be done?

Tips for organizing nested form rows with Bootstrap 4

Using JQuery to Identify the Clicked Div Container