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

Enclose every line of the paragraph within a <span> element

My <div> element is configured to display a paragraph without any line breaks, similar to the example below: <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dum ...

javascriptjqueryhtml

I'm receiving an unexpected outcome from a query that should be returning a specific result

In my form, I am using rails-jquery-autocomplete to automatically fill in a cabinet_name like this: <%= autocomplete_field_tag :cabinet_name, '', cabinets_autocomplete_cabinet_name_path %> When the data is submitted to the device controll ...

jqueryruby-on-rails

What is the best way to alter a specific value within an object without losing other important data?

I'm currently working on developing a function that will activate when the count either matches or is half the initial price required to open, and it should not reset to false even if the count drops back to 0. Below is some sample data: openData = { ...

javascriptobject

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being

I've recently created a webpage with some Java source code, neatly organized within blocks. However, I'm looking to enhance its appearance so it truly looks like Java code. Take a look at my page's code here for reference: Are there any onl ...

javascriptjqueryhtmlcsssyntax-highlighting

Learn the technique of storing a sequence of functions within a variable using jQuery

For instance, I am looking to assign a sequential process to multiple variables and utilize them in various scenarios. var disable_btn = true; var button_me = $('#contents.getsamplekit .sample-form .form #submit-btn-freeSample-me'); var button_d ...

javascriptjqueryfunctionvariableschaining

Generate a new span element within a div element programmatically using Vuex

I have integrated an existing web application developed using vue.js. Below is the code snippet: function () { var e = this, t = e.$createElement, n = e._self._c || t; return e.messag ...

javascriptvue.js

Display everything when an option is clicked

I have a filter that is working perfectly. When I select a specific category, it filters out only rows with that category. However, I am stuck on how to display all rows again after clicking on the first option. My objective is to show all rows when "Categ ...

javascripthtmljquerycss

Error: Unexpected token : encountered in jQuery ajax call

When creating a web page that requests remote data (json), using jQuery.ajax works well within the same domain. However, if the request is made from a different domain (e.g. localhost), browsers block it and display: No 'Access-Control-Allow-Or ...

javascriptjqueryjsonajax

Tips for implementing ngChange within a personalized directive

Looking to create a directive for a toggle button, here is the code I want to include in the directive: <div class="toggle-button" ng-class="{true: toggleTrue === true, false: toggleTrue === false}"> <button class="true" ng-click="toggleTrue ...

javascriptangularjsangularjs-directive

Troubleshooting Problems with CSS Printing on iOS Devices

On desktop (both Windows and Mac), the print preview displays correctly. However, on iOS devices, the full width is not shown and there is some blank space above. The issue I'm facing is that I cannot debug this problem using Browserstack. I am restr ...

cssprinting

There seems to be an issue with the next function's functionality within a Nodejs middleware

Currently, I am delving into the world of Nodejs with expressjs. My focus is on understanding middleware functions and specifically, the role of "next". In the middleware concept, "next" simply moves on to the next middleware in line. So, what exactly is ...

javascriptnode.jsexpress

"Encountered a roadblock while attempting to utilize the applyMatrix

I am currently working on running an animation using a JSON file and a custom JSON loader, not the one provided with three.js. Within the JSON file, there is an object called frames that contains multiple frames, each with shape information and a simulatio ...

javascriptthree.js

Can the installation of Canvas be done on a device with the M1 chip?

When attempting to install canvas on a MacBook Pro M1 using the command: npm install --save-dev canvas An error is displayed: npm ERR! code 1 npm ERR! path /Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas ... (error message con ...

javascriptnode.js

What is the process of linking a PHP file to an HTML form?

Having trouble sending emails with form data since the mailto function isn't working properly. For some reason, the php file is not connecting to the html form. When I try running index.html locally and hit submit, the browser displays php code inste ...

phphtmlformsemailaction

Automatic button rotation

I managed to set up a button that works on click with a delay, making it semi-automatic. However, I'm struggling with getting it to not pause after just one click. Here's what I have so far: <!DOCTYPE html> <html> <body> &l ...

javascripthtml

ajax is unable to decode a JSON string from a GET request

Currently, I am leveraging angularjs to retrieve userId, userTitle, and userComment from a form. These values are then sent to a PHP page from the controller for communication with a server. Everything works well when sending integers, but I face an issue ...

javascriptphpangularjsajax

Tests are not visible to jasmine-node

Currently, I am utilizing jasmine-node and running it with the following command: node.exe path/to/jasmine_node --verbose path/to/my_file.js Despite successfully invoking Jasmine-node and receiving an error for incorrect paths, it appears that no tests a ...

javascriptnode.jsjasminejasmine-node

Is there a way to prevent the window.on('beforeUnload') event from triggering when using the <a> tag?

For my project, I require a user confirmation alert to appear when the user attempts to close the window or tab using the X button. However, the window.on('beforeUnload') function also triggers for hyperlinks. How can I prevent the leave page al ...

javascriptjqueryjspjquery-events

What is the best way to set the width of a w2grid to 100%

Has anyone tried using w2grid before? I'm having trouble figuring out how to make it fill its container 100%. Here's the HTML snippet: <div id="a" style="width:100%"> <!-- top left container--> <div>This ...

javascripthtmlw2ui

Having trouble removing a row from Mysql database using Node.js

Recently, I developed a pet shop web application using nodeJS and MySql. Everything was working smoothly until I encountered an issue with deleting pets by their pet_id. Upon attempting to delete using pet_id 'pa04', I received the following erro ...

javascriptmysqlnode.jsexpress