I have a sortable in which two consecutive elements may be "attached" to each other. When the attach action is performed, I wrap the two "field" elements in a "field-group-container" div in hopes that I would be able to drag both inner "field" elements as a unit.
Oddly enough, this approach works perfectly if I initiate the dragging from the field-group-container's first child (of two children), however, if I initiate the dragging from the second child, the field gets pulled out of the field-group-container. I would like the two field elements to move together regardless of which element is clicked to initiate dragging.
I tried making the "items" sortable option more specific to only allow dragging field-group-containers and fields that are not children of a field-group-container but it looks like the click event is cancelled before it bubbles up to the field-group-container.
In order to find out whether this is an issue with the sortable or my implementation of it, I created a boiled down version to see if I could replicate my issue.
<div id="sortable">
<div class="field">A</div>
<div class="field">B</div>
<div class="field-group-container">
<div class="field">C</div>
<div class="field">D</div>
</div>
<div class="field">E</div>
<div class="field">F</div>
<div class="field">G</div>
</div>
http://jsfiddle.net/prsGz/
It works exactly as expected!
This contradicts the behavior I'm observing in my project. In my real
implementation the "field" elements have several inner elements such
as labels, buttons, etc.
My question
Does anyone know what would be causing this behavior?
What could be causing my two field elements to not move as a unit
even though they are both wrapped in a parent container?
Related
Setup:
[gridstack]
I'm using "0.4.0" merged to "1.0.0-dev" from the develop branch.
I have a column for the plugin/widget that I will drag onto the grid, so basically I use the jQueryUI for droppable and draggable.
Just discovered an issue while resizing and dragging of items around and after awhile trying to drag another into the grid generates and error "Uncaught TypeError: Cannot set property '_grid of undefined" line 933 "node._grid = self;". Screenshot is attached.
Also the "ui-draggable-handle" sticks on the grid with additional class named "ui-draggable-dragging". It totally breaks the plugin and you need to refresh the page to have all functionality back to normal but every other dragstop event.
<div id="sidebar">
<div class="item ui-draggables"><span>{json-config}</span></div>
</div>
<div id="grid1" class="grid-stack">
<div class="grid-stack-item">//loaded from draggables with json config</div>
</div>
http://www.screencast.com/t/snK9VR1C442
I need to parse a large document that has elements arranged as a series of headings followed by a div, something like this:
<h2> Section Title </h2>
<div> Section Content</div>
<h2> Section Title 2</h2>
<div> Section Content2</div>
<h4> Section Title 3</h4>
<div> Section Content 3</div>
So basically in the dom, I need to group together an <h> with the next following <div>. The dom doesn't seem to be an element for the child / sibling / parent functions, and I need to allow for inconsistencies in the input file as well so don't want to do something like find all the h elements, find all the divs, and walk through each list in a loop assuming the elements are the correct matches. Is there any way to get the dom set up so I can walk through it using the child functions, or some other clean means of walking through the dom to do this?
Easiest way I figured out is to access the element 'root'to get to the top of the dom as an element.
From there it is still tricky to figure out how to walk through the sequence of child elements but in this case, search on the divs and prev_sibling() appears to work, if the content is predictable, but my content might be
I currently have implemented jQuery UI sortable on my list of items
<ul>
<li>1</li>
<li>2</li>
...
</ul>
To that list I have slider which shows only X number of items and rest can be shown by clicking next or previous buttons.
I tried to add sort parameter to sortable constructor and call those methods, but here is the thing. The container showNext and showPrevious methods do some jQuery animation and destroy first node etc. and I think that workaround would be easier and leave those methods for buttons.
How would you suggest to make this happen: When I start to reorder elements and moving to the end of the list, the list shows next element and places currently dragged after that, but doesn't stop dragging event.
I figured this by making container overflow:hidden and implemented sort(e,ui)
sort : function(e, ui) {
//move by modulus
}
I am using jquery ui draggable, and eventually droppable to make it possible to reorder pictures into different boxes.
When I drag a picture out of the box it appears under all the other elements once it leaves its direct container.
While googling I was able to found to add:
helper: 'clone',
appendTo: "body"
This makes it so what is being dragged appears on top of all elements, but it leaves the original copy still in the box and I do not want that.
Is there a way I can make the element stay on top of everything when being dragged? I have tried a high z-index to no avail.
Here is a jsfiddle that shows the first draggle element behind behind the second. it is not an issue the other way around.
i am not able to change the position relative on the containing divs without breaking a lot of other things.
http://jsfiddle.net/cBWhX/6/
I found a few issues with your code, I think I've worked them out and got it working.
Working Example
First fix your HTML:
<div id="container1" style="background-color:red;padding:20px">
<div class="draggableContainer">
<div class="draggable" style="background-color:blue;width:200px;height:200px;"></div>
</div>
<div class="draggableContainer">
<div class="draggable" style="background-color:yellow;width:200px;height:200px;"></div>
</div>
<div class="draggableContainer"></div>
</div>
Next You'll probably want to use the stack option:
$('.draggable').draggable({
revert: "invalid",
snap: ".draggableContainer",
stack: ".draggable"
});
$('.draggableContainer').droppable()
From the API documentation:
Stack
Controls the z-index of the set of elements that match the selector, always brings the currently dragged item to the front.
Though there is an option - 'stack' existing while initiating draggables, but it is not working properly, So I have wrote a small library dragToFront playing with z-index. Following is the plunkr link
https://embed.plnkr.co/mJqkxSJhf1Umg7r2oLQN/
Stack wasn't working for me either. I was able to correct the z-index issue by using the appendTo property.
function setupDraggableFields($elements) {
$elements.draggable({
helper: "clone",
handle: ".field-sort-handle",
appendTo: ".section-container"
});
}
When I use JQuery UI's draggable/sortable feature at the parent element....and when applying contenteditable attribute at the child item....the selection feature doesn't works....
<div id="parent">
<div id="child" contenteditable></div>
</div>
$('#parent').draggable();
i.e. focus or active features do not work....without the dragging/sorting features of jQuery UI...focus and active features works at content editable applied element.....
OK.....I found the solution here: How can I enable 'draggable' on a element with contentEditable?
But the problem is: when calling the focus() method inside click-event...it brings cursor at the begging of focused element....it should be at the end...for typing something cursor should go to end...Is there any way to call focus() method and tell him that place cursor at the end of focused element?