Scrollable container with jQuery draggable functionality

I am currently working on implementing a draggable list that I want to contain within a scrollable div. 

$( ".draggable" ).draggable();

Here is the fiddle I have created for this: http://jsfiddle.net/YvJhE/660/

However, the issue I am facing is that the draggable elements remain confined within the container. My goal is to allow them to be dragged out of the container while also enabling scrolling within it when there are more elements than can fit in the container.

Can anyone provide guidance on how I can achieve this functionality?

javascriptjqueryhtmlcssdraggable

Answer №1

Interactions like these are easily managed by jQuery using a special object that can be attached to another element within the DOM:

$( ".draggable" ).draggable({
    helper: 'clone',
    appendTo: '#outer'
});

You can then designate a droppable area elsewhere:

$('#dropspace').droppable({
    accept: '.draggable',
    drop: function( event, ui ) {
        window.alert('Element dropped at left: ' + ui.position.left + '; top: ' + ui.position.top);
    }
});

Check out this proof of concept: http://jsfiddle.net/YvJhE/662/

Remember, you still need to handle moving the actual DOM element to its new location or creating a new one based on your specific needs.

Answer №2

When utilizing the helper: 'clone' attribute, a duplicate of the element being dragged is generated automatically, enabling it to be moved outside of its original container:

jQuery(".draggable").draggable({
    helper: 'clone',
    revert: 'invalid',
    appendTo: 'body'
});

Answer №3

This question brings up an interesting aspect of JQuery's handling of draggable elements. The limitation on dragging these elements outside of the parent "elements" div serves as a boundary for their movement.

If you want more flexibility in where you can drag them, consider removing the parent element "elements". This will allow you to freely move the elements anywhere on the page.

Another option is to enlarge the parent element by adjusting its width and height to 100%.

In a bootstrap container, draggable elements can be moved within the container's boundaries but not beyond them.

Alternatively, you can position the draggable elements outside of the parent element using absolute positioning.

CSS:

.draggable{
   width: 60px;
   z-index: 15;
   margin: 0 auto;
   position: absolute;
}

#elements{
        overflow: scroll;
        position:absolute;
        left:20px;
        width:100%;
        height:100%;
        background:#fff;
        border:1px solid #000;
        z-index:5;
        padding:10px;
        font-size: 10px;
}

Html:

<div id="elements"/>

<div id="" class="draggable ui-widget-content">
    <p>Drag me around</p>
</div>

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

What is the solution to the error "Maximum update depth exceeded. Calls to setState inside componentWillUpdate or componentDidUpdate" in React?

Everything was running smoothly until this unexpected issue appeared. I attempted to change the condition to componentDidMount, but unfortunately, that didn't resolve the problem. The error is occurring in this particular function. componentDidUpd ...

javascriptreactjsfirebasedebuggingnpm

I am experiencing issues with the loading of CSS and JavaScript files in my recently created Laravel project

Recently, I received a Laravel project and successfully downloaded its configuration to get it up and running using php artisan serve. Upon attempting to access the project through localhost:8000, only the HTML content is displayed without any styling fro ...

phpcsslaravelbootstrap-4dependencies

When it comes to Redux, is it considered an anti-pattern to pass an event from a presentational component to a container component

As a newcomer to Redux, I am challenging myself to rebuild an old React app using this technology in order to gain proficiency. However, I am facing a significant challenge regarding where to place the logic within the application. My understanding is tha ...

javascriptreactjsreduxreact-redux

The Firebase child_changed event may occasionally be missed at random intervals when the browser tab is inactive

I am currently developing a real-time application where one user can enter the app, and all other users connected to that session will receive notifications or payloads of what that user is entering. Below is the Firebase child_changed listener that every ...

javascriptangularjsfirebaseionic-frameworkfirebase-realtime-database

Why am I unable to access the array once the loop has finished?

While utilizing the Google Maps API and AngularJS (1.5.8), I encountered an issue where I couldn't access markers that were created in a loop. The code snippet below is located inside the initMap function: var markers = []; for(var i=0; i<10; i++ ...

javascriptgoogle-maps

What could be causing the 500 response code when making a request to the NextJS API route within the app directory?

Every time I attempt to access my API route, a 500 Internal Server Error code is returned The origin of the request export const fetchSuggestion = async () => { const response = await fetch('/api/getSuggestion', { cache: 'no-store&ap ...

javascriptnode.jsnext.jsserver-side-renderingnext.js13

Having trouble finding the sum of values in an array using the Reduce method?

I have always used a 'for' loop to calculate sums in tables, but recently I learned about a better way - using the 'reduce' method. Following documentation and examples with simple arrays was easy enough, but now I am working with an ar ...

javascriptarraysreduce

Mapping an array of objects within another array of objects

I have a collection of objects that I looped through to extract the content: const teamSliderContent = [ { Description1: 'Chef. Mordy Wenk', Title: 'Head of the Chief staff.', id: 1, }, { Desc ...

javascriptarraysreactjsjsxchakra-ui

Contrast between pm.response.json() and parsing the responseBody using JSON.parse()

Can you explain the key distinction between const json_response = pm.response.json() and json_response = JSON.parse(responseBody) ...

javascriptjsonpostman

Tips for avoiding infinite re-render loop when updating state in React/Next.js

I currently have a unique Next.js application that showcases randomly selected YouTube videos. The state within the app is structured as follows (managed by Redux): const state = { entities: { videos: { 'vidId1': { ...

javascriptreactjsreduxnext.js

Looking for assistance with retrieving all files from a directory based on their file extensions in JavaScript

Looking for a way to gather all the '.txt' files from a folder that also contains a 'backup' folder, and moving them into the 'backup' folder using Node.js. If you have any suggestions, please share. Thanks! Best regards, M ...

javascriptnode.js

"Sequelize will pause and wait for the loop to finish before executing the

As someone with a background in PHP, I'm finding the concept of callbacks a bit challenging to grasp. Essentially, I need to retrieve some rows and then iterate through them to compare against another model (in a different database). However, I want ...

javascriptnode.jspromisesequelize.js

What is the best way to position my logo on top of the stunning space background?

Click here to check out the code on CodePen Please take a look at my code on codepen.io. I am new to Stack Overflow so please be patient with me if I make any mistakes. ;-; I currently have my logo (https://i.stack.imgur.com/W0nWc.png) included in the co ...

javascripthtmlcsslayer

Executing npm commands programmatically from a node.js script

Currently, I am developing a specialized command line interface (CLI) for managing various packages to be installed or uninstalled using npm. Should I execute npm through spawn('npm') or require('npm')? require('child_process&apos ...

javascriptnode.jsnpm

Is axios allowed to be used in this scenario?

As a newcomer to web development, I apologize in advance if my question seems basic or if the details provided are insufficient. Nevertheless, I hope you can assist me with the following query: Is it possible to execute an axios.post request within a vue. ...

javascriptvue.jsaxios

What is the best method for dynamically generating a 3-column table (i.e. a tile list)?

Here is a snippet of my JSON-formatted data: {"mydata": [{"phone":"5456868","name":"Dave"},{"phone":"9999875","name":"Susan"}, {"phone":"9994058","name":"Mary"},{"phone":"9995658","name":"Jan"}, {"phone":"3584650","name":"Yanni"},{"phone":"4512523"," ...

jqueryjson

Step-by-step guide on integrating node.js and MySQL to store data from an online form in a database

Currently, I am attempting to insert data into a MySQL database using node.js by clicking the submit button. However, an error message has appeared and despite understanding it somewhat, I am unsure of how to proceed. Any assistance would be greatly apprec ...

javascripthtmlmysqlnode.js

Issue with JQuery's click and submit events not triggering, but change event is working fine

My webpage has a dynamic DOM that includes add and save buttons to interact with elements. Each row also has a remove option for deletion. When a user logs in, the controller redirects them to their homepage in the codeigniter PHP framework. This controlle ...

javascriptphpjqueryhtmlcodeigniter

The PKIJS digital signature does not align with the verification process

Explore the code snippet below const data = await Deno.readFile("./README.md"); const certificate = (await loadPEM("./playground/domain.pem"))[0] as Certificate; const privateKey = (await loadPEM("./playground/domain-pk ...

javascripttypescriptcryptojspki

The background of the wrapper div refuses to expand beyond the original size of the browser window

I'm currently in the process of developing a website, focusing on establishing the fundamental structure of my design to facilitate the addition of content and allow for the dynamic expansion of the div based on the length of the content. Nevertheless ...

htmlcss