I'm trying to build an interface tool which essentially allows users to build a grid out of common UI elements.
Here's a jsFiddle: http://jsfiddle.net/FX4Fw/
Essentially, the idea is that you drag content elements (picture, headline, standfirst, etc) into the grey placeholder at the bottom. Once they're in there, they should no longer be Draggables (because this breaks the CSS grid system they inherit) and they can then be resized. The original items in the UI should stay where they are, so the user is essentially cloning them into the box to be positioned.
This almost works in my demo, but when the user grabs a UI element and drags it into the placeholder, I then remove the ui-draggable class from the cloned element that ends up inside the placeholder. This also removes it from the original source element (I want this to stay where it is) so it's no longer usable.
Is there a way to combine these things so they work in tandem? Hopefully it's clear what I'm trying to do.
Never mind - found the answer here: https://stackoverflow.com/a/3041887/176615
(basically this code)
stop: function(event, ui) {
//check it wasn't here previously
if(!ui.item.data('tag') && !ui.item.data('handle')) {
ui.item.data('tag', true); //tag new draggable drops
ui.item.removeClass('ui-draggable'); // dirty hack
}
},
Related
I want to implement similar functionality to the jQuery UI Draggable & Sortable, but using Kendo UI.
This should allow me to drag from a list of options and place them within a sortable list.
Here is the jQuery UI functionality: http://jqueryui.com/draggable/#sortable
I want 2 panels, one with items that can be dragged and the other containing the dragged items. The closest thing I could find on Kendo UI is: http://demos.telerik.com/kendo-ui/sortable/linkedlists, but the items in the first list (on the left) are sortable and this moves the item from the first list.
I have looked at all of the Kendo UI samples on Teleriks website, but I cannot see any examples of how to do this.
Update:
I am now part way there. I have 2 sortable lists and I have added code to stop the 'draggable' items from sortable. However, when I drag an item to the 'sortable' list, it disappears from the 'draggable' list.
Here's the code I'm using to stop the items being sortable:
start: function() {
$("#draggable li").each(function() {
$(this).removeClass("sortable");
});
Here is the fiddle: http://jsfiddle.net/kgjertsen/r4xmLevq/
Anyone able to tell me how to stop the items from disappearing?
After a lot of investigation, it turns out that you cannot link draggable with sortable, as you can with jQuery. You need to drop the item into the container, then sort it from its default place, which is at the bottom.
Telerik justify this with a statement saying that they cannot implement this behaviour as the controls cannot know about each other, as this is bad practice.
Personally, I think this is terrible and the functionality would be a great addition to the Kendo UI library.
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.
I have a question regarding drag and drop functionality of jquery ui. I m building a web app where a user can build his own object by dragging part from the part area(shelf) on to the stage). This stage will contain a main component which will be mostly circular in nature on which these sub components/parts will be placed.
These parts are images of 200px x 400px with transparent background and are draggable. They can be dropped onto stage area. Now here is the issue i m facing:
When i drag these object and place it on stage area, due the such a large image height they tend to overlap the shelf area. This overlapping makes the parts in shelf area unselectable or non draggable. Additionally when many such parts are on stage it is difficult to select the desired part due to such overlapping.
Is there any solution by which i can overcome this overlapping issue.
development platform is jquery ui and .net
You could add a class to your elements when dropping them on your shelf to reduce their sizes.
You did not provide much information apart from the context, such as which plugin you using for the drag/drop.
I have made a quick example using jQuery UI Droppable. In the drop event, you add a css class to the dropped element, accessible through ui.draggable. You can also bind the out event, to remove the class in case your elements could be dragged out of the target.
$("#droppable").droppable({
drop: function(event, ui) {
$(ui.draggable).addClass('small');
},
out: function(event, ui) {
$(ui.draggable).removeClass('small');
},
});
DEMO
I suppose you could adapt this method to you own implementation.
I am working on a tool based on jQuery UI draggable functionality.
I have a number of boxes in the left column of the table. When they are dragged in yellow area, I would expect the remaining divs to move upwards to fill the space left by the box that was moved.
But it's not happening. Why?
It is pretty difficult to test but from my knowledge on the question here is a possible cause/solution to this.
The droppable plugin does not remove the dragged element from its original markup position, it is visually moved to the droppable element (with some option allowing to accept to drop certain elements or not, events, etc).
The elements have a position: relative css rule, which represents the "normal flow" for elements (in the order they appear in the markup). So even if the element is visually placed elsewhere on the page with css, its place in the markup is still the same and it is still taking the space it normally should.
This fiddle illustrate what i'm trying to explain :-)
By looking at the source code form the "working website", they actually remove the dragged element from the original draggable list and re-create it in the droppable list !
When they define the .droppable() they do this:
h.droppable({
tolerance: "intersect",
accept: ".card",
greedy: true,
drop: function (a, b) {
card = b.draggable;
putCardIntoStack(card, c)
}
});
On the drop event, they call putCardIntoStack(card, c) passing the currently dragged element as the card parameter. Within this method, they remove the original "card" (a.remove()) and re-create it in the dropzone (newcard = createCard();):
function putCardIntoStack(a, b) {
progressVal = $('#progBarRd').width();
card_idDOM = a.attr('id');
card_idDB = card_idDOM.substr(IDPREFIX_CARD.length, card_idDOM.length - IDPREFIX_CARD.length);
stack_idDB = b.substr(IDPREFIX_STACK.length, b.length - IDPREFIX_STACK.length);
$.ajax({
url: URL_DRAGDROPAJAX,
type: 'POST',
data: 'action=movecard&cardid=' + card_idDB + '&tostack=' + stack_idDB + '&prog=' + progressVal
});
// 'a' is the card
// they extract the id/content from the dragged card
cardId = a.attr('id');
cardLabel = a.text();
// they remove the card from the DOM
a.remove();
// they create a new card with the extracted info
newcard = createCard(cardId, cardLabel);
newcard.addClass('stackcard');
// and append it to the dropzone
$('#' + b).removeClass("empty").find('.stackDrop').append(newcard);
globalcheck()
}
jQuery UI does a similar thing on the droppable demo page. On the drop event, they call a function deleteImage() which removes the dragged image from the original markup and appends it to the drop zone.
I hope I'm clear enough :-)
I also hope I'm right, it is pretty difficult to test quickly but it makes sense :-)
I have a sortable list (of tasks). It helps prioritize tasks, so I want to keep this functionality. Now I want to add subtasks to the functionality: I want to enable users to drag one task over to another task and drop it there to turn it into a subtask.
Applying .draggable() and .droppable() to items that are already sortable has no effect. What could I do?
I put together a demo of how to do this... but it may not be the best method. Here are some problems I've discovered:
Because this code uses the placeholder to figure out where you are moving the list, you can only drop an item inside another item if you approach it from the top. I did get a working version where you could drop an item anywhere inside the base item, but the code was just too messy and cumbersome.
Sometimes when an item from the other list is dropped in an item, it becomes stuck. I'm not sure why, but it becomes unstuck when the list group is moved to the other list.
I'm sure there is a better method, one that calculates the intersection of list items (just like the sortable script does). But this is a quick and dirty method.
$(function() {
var phTop, container, indx;
$("#sortable1, #sortable2").sortable({
connectWith: '.connectedSortable',
beforeStop: function(e,ui){
phTop = ui.placeholder.position().top;
container = ui.placeholder.parent();
indx = ui.placeholder.index();
},
stop: function(e,ui){
var list = container.find('> li').eq(indx);
// 15 is a pixel tolerance between the two items (dragging in from the top)
if ( Math.abs( phTop - ui.position.top ) < 15 ) {
// prevent list depth > 1
if (ui.item.find('li').length > 0) { return; }
// add ul inside of li to make subgroup
if (!list.find('ul').length) { list.append('<ul></ul>'); }
ui.item.appendTo( list.find('> ul') );
}
container.find('li > ul:empty').remove(); // remove empty subgroups
}
}).disableSelection();
});
After I posted my question I had no patience, and I decided to ignore UI.sortable altogether, building the required functionality from draggable and droppable and using special divs as spacers that would swell up on dragover to facilitate dropping in between tasks.
That worked to some degree, except it's all much more code and it's a lot more jittery and bugprone than sortable, even with the refreshPositions option set to true. Still, there might be other valid reasons to want to circumvent UI.sortable.
In very brief faux code: $(.taskitem).draggable
revert: invalid
start: animate height of spacers from 0 to 5
$(.spacer).droppable
over: animate height from 5 to 50
out: animate height back to 5
drop: insert draggable after spacer
find spacer with same index as draggable and move it along