I m new to Jquery UI drag-drop and sortable,
I want to create one list and one container, specific elements from the list can we drop to the container like element1 and element2.
After dropping elements to the container it will make another dropable container inside the previous dropable container.
from list remaining elements can be put inside this new container now.
currently, i m able to drag and drop elements from list to container,
Needed help for other features, I read API documentation of jquery UI drag-drop and sortable, did not get anything from it.
any kind of help will be appreciated.
Thanks.
Related
I'm using the react-draggable library to move elements in the body. But right now I'm struggling with one issue. It's about elements in the draggable area.
The idea is:
User can move some elements over container div (works fine) (there can be multiple draggable elements)
User can't move an element on the other element which is also draggable element in that area
I want to prevent overlapping the elements in that zone.
Do you know how can I achieve it? :)
Thank you so much!
I am using Sortable Grid from here to perform a drag and drop in my app. However, I want to dynamically create a Row while dropping.
I mean say if there are two rows in Sortable Grid. If user drags an element and thinks of creating the third row before dropping it, then he/she should be able to do it by dropping below the second row. How do I do it?
Use a div below the boxes, and use ondragenter to prepare the program for a new row. I don't know how the plugin works, but this should help. Make the div however high you want, and that will be the distance beneath the list that can be selected (I recommend the height of the grid boxes)
I'm facing a problem with Ext JS drag and drop zones and trying to make it works as I expected:
Please take a look into my Fiddle.
I want to create multiple overlapping drag-and-drop-zones like the attachment: Drag and drop
I have a main drop-zone panels and some panels within it (also are drop zones) and some drag-able items.
In my Fiddle, it works fine except:
I can't drop items into drop-zones that inside another drop-zone(the
1st panel - Drop zone 1).
In the 3rd panel(title: "I'm not a drop zone"), I can drop items into its children.
I want to drag drag-able items into drop-zones, not only into parent drop-zone but also into its children drop-zones too.
How can I do that?
Thank you.
Sorry my bad English.
I'm using the REDIPS Drag and Drop JQuery PlugIN, that allows me to create draggable content that snaps to a defined table and its cells. However I need to change a bit in such a way that it allows me to drop an element anywhere in a cell, rather than just placing it by default at the end or the beginning.
So I still need to functionality where it "snaps content to a grid" but I need it to have any "left margin" within the dropped cell. Once the div is dropped in a cell i would like it get its left margin or offset from the parent cell.
Link to fiddle
var marginLeftAfterDrop = $("#" + divID).position.left;
I can see that you are using REDIPS for the draggable feature but I highly suggest to use the plugin made by Jquery through this link.
It is highly customizable and extendable according to your need. Moreover, it is highly supported by the community and plenty of developers are using it.
I want to drag and drop my widget into my div. I drag my widget over my div, but it doesnt drop the true place.
Here is my example: jsfiddle.net/Mg6V3/15
My goal is when i drop the widget on "1", widget must be drop in it.
Thank you.
It was easier than I originally thought it would be.
First of all, there is greedy option you can set when initializing droppable. It aims to stop drop events from being propagated to all droppable parent when using nested droppables.
Second of all, binding the droppable behavior to matched selectors isn't a constant process. Meaning, that when using something like $('.test').droppable() it will bind droppable only to applicable elements that already exists in the DOM. If you create new ones you're suppose to initialize droppable on them on your own.
Here's the working example based on your code. I tried to be minimize the changes - it can be done better, cleaner but it's just an illustration so I guess it's ok. http://jsfiddle.net/vM3dU/