Firstly, I made a JS fiddle to explain my problem : http://jsfiddle.net/QvRjL/59/
I am completely stuck on a drag and drop problem:
I want always have the dragging element visible above my containers
I need to be able to drag the yellow boxes located in the cells of the "containerB" from row 1 into one of the cells of the row 3 for exemple.
I need to be able to drag the yellow boxes located in the cells of the "containerA" to the row 3 of the "containerB"
When I apply the property AppendTo : 'body' : the yellow boxes are always visible over all my containers, but it is not possible to reach the "row3" of the "containerB" because of the auto-scroll is not working on this container
When I apply the AppendTo : '#container' property : the auto-scroll of the "containerB" is enabled but the yellow boxes are not visible above the "containerA"
My constraints are that all the cells must have the property "overflow" because the cells can have plenty of yellow squares.
Any help would be welcome!
I think I figure it out using using appendTo : 'body' to view the clone over all containers and check the drag position of my scrollable container B to create a setInterval function to simulate the scroll.
Here is my fiddle updated : http://jsfiddle.net/QvRjL/66/
Any comment or advice are welcome!
Related
Here i make a listview with sectionHeader, and then i supply a sub navigator for quick navigation, just like the contact list ,,the question is :
The listview has 3000 rows, when first come to the view, i click 'z' to quickly navigate to bottom of listview,,but i had to wait for the all the section redered.
Any some best ways to solve the problem?
Problem
I am having problems with my sortable list with several items of various height. The problem occurs when I'm trying to move a larger item to the first or last position (which both have smaller objects). If I succeed currently depends very much on where on the larger item I click and start dragging.
If I want to move the item to the smaller bottom position I must click close to the bottom of the item for it to work, and if I want to drag it to the top position I must click closely to the top. But I want to be able to drag the item by clicking anywhere.
Some additional information
The items cannot be dragged outside the parent and the parent is only as large as it has to be and a scroll appears if it's larger than it's container. So it seems that I cannot drag the larger item past the first(smaller) item if I don't drag it in the top part of the item.
I've been trying to fix this by using cursorAt and using top:0 and another test using bottom:0 But it doesn't seem to make any difference (so I might have misunderstood how to use it). I am currently using tolerance: pointer.
I can bypass the problem of not being able to drag the larger item to the last position by temporary during the sorting increasing the height with the height of the dragged item. But it doesn't always work and its not a very good solution. And the problem of not being able to drag it to the top still appears?
I cannot change the JQuery code as in jquery-sortable-with-containment-parent-and-different-item-heights
Question:
How can I drag a larger item to the top or bottom position while allowing the user to click anywhere on the item?
Thanks for your help!
This might not solve your problem, but I thought I'd share the results of some experimenting I did today. I needed to make a sortable photo gallery with inline-block pictures of varying widths, and found that moving wider photos would be really hard work because the placeholder was smaller than the item I was moving. I ended up using this:
container.sortable({
placeholder: "photo placeholder",
start: function (event, ui) {
ui.placeholder.width(ui.item.width());
}
});
The custom placeholder classes are there to ensure the placeholder isn't hidden by default, and the start event ensures that the placeholder is the same width as the item you're about to move. This worked very well for me, and in your case, substituting height for width might work.
I also tried using containment as you have done, and found that it sometimes makes things much harder depending on the items in the row. Like you have explained, including tolerance: "pointer" helps to alleviate the issues, but if possible, removing containment generally makes the UI more forgiving.
What I'm trying to do is simple: bring a label in front of an image within a subview.
But all of the options for arranging are disabled/un-selectable when my label is selected. I find this happens often.
What could be the reason that I'm almost never allowed to change the z-axis of my objects in the Arrange menu? Is it a better practice to avoid this feature and set the order of views programmatically?
It can depend on how you have selected the label (similar to how the label can only be moved with the keyboard when selected in some ways).
A simple alternative is to look at the list of view in the pane on the left and to drag the views up and down to change the order.
It happens sometimes. In that situation, click the view or image you want to send back then you will see little square box at the edges of image from which you can re size your image, Just click on it once and then go to Editor > Arrange > Choose option according your need.
I have a tableView with multiple TableViewRow objects, always 4.
When the edit button is clicked the row can be reordered, which is working.
But when the edit button is clicked the elements inside of a row seem to be moved with margins from left and right.
The items in a row should not be moved, so I was hoping someone could tell me how I can make sure the labels inside a row element are not being moved around when edited.
I have included some images, hoping to clarify my question:
Rows when not edited
Rows when edited
The solution was easy, but I didnt know.
The way to achieve this; Add a view to each row and do NOT set the left or right properties.
This way the delete button and move icon are not pushing the inner view away.
Its a default behavior. I dont think there's any way defined in Titanium API to override the moving of inner elements. So you cannot change this default behavior.
I have created tab layout as in this example http://jqueryui.com/demos/tabs/#bottom with controls bellow the panel. I have 3 default tabs, which can't be delted and than user can add some more tabs and also delete them.
The problem is that the default tabs should be on the top like there http://jqueryui.com/demos/tabs/#default so because UI doesn't support two control panels, I have created new element looking like control panel on top <p class="ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-top tabs-header-top"></p> with fixed heigth. But now I don't know how to move the default tabs to the right position. I tried adding them position: relative; top:-20em; ,but to make this working, the whole tab container must have fixed heigth and that's bad, because I need it to stretch within the window to be as big as possible.
So is there any other way how to move the default tabs to the top?
Thanks
edit: here is example of my idea, but achieved with fixd heigth http://jsfiddle.net/L6QjK/2/
To be clear: This method is technicaly working, so the questin is not about making tabs with two control panels, but about positioning the tabs
Not sure if it will work, but try creating two DIVs, one with default styling and one with the bottom styling:
<div class="tabs">...
<div class="tabs tabs-bottom">
and then use $(".tabs").tabs(...)
So finally I managed to create two control panels on my own by changing the jquery ui code.
If somebody is trying to make same thing as I here are some tips:
1) To create multiple control panels, find this.list=this.element.find("ol,ul)").eq(0)
now, the .eq(0) selector causes, that onlz the first ul or ol is made to control panel, so I simply modified the find selector to this :this.list=this.element.find("ol,ul:lt(2))") and the :lt(2) selector will make first two ULs to two control panels. Now we have two control panels and it is all about css positioning, you can get isnpired here http://jqueryui.com/demos/tabs/#bottom to move one control panle to the bottom.
2)I am using schema, that the first control panel contains static tabs, and to the second one are added dznamic tabs. So I also needed to change the target during adding tabs. For this you have to find h.appendTo(this.list) and change it to h.appendTo(this.list[1]) because ad.1) this.list now contains two elements and I want the tabs add to the second one.
So finaly to make two control panels tab layout isn't that hard