I'm using Gridster for one of my first Javascript projects and I've run into a problem.
When I add a widget to my grid, it doesn't go where I want, here is a jsfiddle of a sample of my project.
$('#blockDroite').droppable({
drop: function(e) {
gridster.add_widget('<li class="widget"><div class="delete">X</div></li>', 1, 1);
}
});
When I drag and drop in a drop zone, a widget is created, but not at the correct position. Rather, it's placing it outside of the grid. When I move it manually it goes in the grid. When you add a new widget you can see it's behind the first one if you place it in the first column and row.
Question
What can I do to fix this?
Ok I solved my problem, just forgot to add the "gridster class" to my ul. This "gridster class" is defined in the "jquery.gridster.css"
<div id="blockDroite" class="gridster">Drop zone
Related
I have a simple jsfiddle using the Angular Drag and Drop module.
What I want: on the left, a list of cards. Each of them is draggable. On the right, a drop area. Upon drag-drop, the element is cloned and added to the ctrl.program list. So far, so good.
The problem: I must be able to reorder and remove element from the right area (i.e. the program array). I tried multiple solutions, none of them work. Ideally, an element is removed when it is dropped outside of the drop area (i.e. the right column). For now, I simply use a button
<button class="btn" ng-click="remove(ctrl.program, $index)"> remove </button>
$scope.remove = function(array, index){
array.splice(index, 1);
}
But it throws
Error: cannot call methods on draggable prior to initialization; attempted to call method 'destroy'
Any idea how to perform a remove smoothly ?
Ok, if anyone gets the same problem, here is the answer.
From this issue,
inserting the script jquery.ui.js after angular.js cause the issue in 1.3 but not 1.2. Specially if the drag or drop directive is used with ngRepeat. On removing the element by $animate.leave , the drag or drop plugin get destroyed by the 'remove' event before the $destroy event.
I inserted jquery.ui.min.js before all the angular scripts and it works perfectly.
I am building a table where when cell is clicked high charts is shown in its place(same way as flip cards). And when highchart is clicked a cell is reverted back it is original state.
However, after creating a chart dynamically all my click functions on a parent stop working when clicking on a chart directly.
I have created this small jsFiddle to demonstrate my problem:
http://jsfiddle.net/2j4qQ/2/
Code:$('#contentDiv').on('click', '.homepageChart', function() {});
$('#contentDiv').on('click', '.homepageChart', function() {});
This function does not fire when clicking directly on a chart. Why? and how can it be
Thanks in advance.
Have a look at this: jsfiddle.net/cssimsek/4Wa32/1. Since you were appending the Highcharts <div> with each click I added the .detach() method to the callback function of the .hide()method, in order to remove the <div> on secondary clicks. It seems to be working ok now.
I have added an overlay with z-index:1; to my highcharts which seems to solve the problem. However, this seems incorrect, since i should be able to listen to dynamically created highcharts events. If anyone has some info on this please share.
Here is updated fiddle:
http://jsfiddle.net/2j4qQ/5/
New to Bootstrap and having some issues with accordion. Hoping someone would help me resolve it.
Basically I have an empty accordion and a drop down menu. Every time a selection made in the drop down menu, it is added to the accordion, with full .accordion-group mark up, but with empty .accordion-body div. After that this accordion-group set as droppable and .ui-droppable class is automatically added.
After that I am able to drag and drop a bunch of other divs into the .accordion-group and those divs are appended to .accordion-body of this particular group. This part works fine, however, as soon as i click to expand any given .accordion-group, .ui-droppable class gets stripped from ALL of them.
How do I stop it from removing .ui-droppable class??
Steps to reproduce:
Use html markup from Bootstrap page:
(For some reason I am unable to format HTML as code here by indenting it with 4 spaces,so im just pasting the link to it)
http://twitter.github.com/bootstrap/javascript.html#collapse
Add JS, which makes groups droppable
$('#accordion2').find('.accordion-group').each(function() {
$(this).droppable();
});
Inspect elements to make sure .ui-droppable class is set
Click to expand a group. Any group.
Inspect elements. .ui-droppable has been stipped from ALL of them
Resolved this, but I think it is a very stupid way to achieve the result, so I am not happy with how Bootstrap handles toggles. I really don't think there is a need to loop though every .accordion-group to re-apply droppable attributes every single time someone opens OR closes a section.
Going to re-do it with just a button and a div for each section.
Here is the solution:
$('#host-groups').on('shown', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
$('#host-groups').on('hidden', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
/facepalm
I'm currently building an application using Sencha Touch. We have a certain Carousel on a page that contains multiple items. Upon clicking a button on a different panel, certain items are added and removed to the panel.
The problem: all works as planned for the first click, but clicking upon clicking the same button again, the functionality stops working and the Carousel display turns blank, with none of the items visible.
Below is the handler for the buttons that change the content of the carousel itemsCarousel. The function adds itemPanels[ b.getBadgeText() ] to the itemsCarousel's items. For the first four clicks or so, this works great. After around then, when I click a button, all the items in the Carousel vanish, and I cannot add or remove any more content, even invoking the Carousel manually from the console.
handler: function(b, e) {
itemsCarousel.insert(1, itemPanels[ b.getBadgeText() ]);
itemsCarousel.doLayout(); itemsCarousel.doComponentLayout();
itemsCarousel.setActiveItem(1);
itemsCarousel.remove(0, false);
}
Things I have attempted:
Changing the order by inserting the item at slot 0, setting 0 active, and then removing 1.
Putting javascript breakpoints on each of the lines, seeing where the carousel goes blank. Sometimes it occours at the .insert() statement, sometimes at the .remove().
Doing all this manually, from the console.
Tweaking the autoDestroy parameter in the .remove() call (as seen above) and in the declaration of itemsCarousel.
If you need more code I can post whatever you think may be relevant, I didn't want to pollute this thread with excess code. Thanks for your help!
Edit: If anyone knows another way to reproduce the same functionality, I am open to that as well. I am thinking perhaps creating a dummy holder Container with one item, a carousel, and deleting the entire carousel and re-adding a brand new (with the new items) one upon the button click?
Well, I figured out how to reproduce the functionality using a different method.
I built multiple carousels, each containing the panels I wanted, and then had a root panel that simply sets the active carousel based on button presses. For example, the hierarchy looks like this now:
rootPanel
{
carousel[0]
{
panel1
panel2
}
carousel[1]
{
panel3
panel4
}
...
}
and I perform rootPanel.setActiveItem(x) to display the new carousel.
I am trying to combine JQuery UI sortable with droppable to create multiple pages for dropping and sorting things. I have setup a blog entry with a stand-along demo here:
http://whit.info/blog/2009/06/06/jquery-ui-combining-sortable-with-droppable/
and here is a jsFiddle:
http://jsfiddle.net/VUuyx/
Note that you can drag to sort the boxes, even into other columns. You can also click the page buttons to switch pages. My problem lies in combining these two features:
By using droppable, I've allowed the user to drag a box to a page button, the page will then switch, and the user can finish dragging it onto the newly revealed page. The problem is that when the page switches, the first column which appears under the dragged box doesn't have it's over event fire. You have to drag to another column, and then back to the first column to get the placeholder to appear.
I'm not sure, but I think I need to somehow clear the events, or fire them manually. The problem seems to stem from the fact that the dragged box is over the column when it is made visible.
Can you assist with this esoteric dilemma?
Thanks!
Update:
So I have been considering possible work arounds for this. Michal suggested firing the refresh method, which indeed doesn't solve the problem, but made me think about event issues.
It seems that when you mouse away and then back again, the proper events fire. Perhaps if I can manually fire the mouseout event for the first column, the reset will allow the mouseover event to fire properly.
I tried this:
$(".column:first").trigger('mouseout');
But I don't think that is the same as sortable's out event. Perhaps I should fire that event?
Maybe I'm misunderstanding the problem, but I don't think it has anything to do with the "page switching". If you turn on both pages at the same time and try to drag "Box 1" to a position above "Box 4", you'll see that it doesn't trigger that "Box 4"'s Sortable has received the Draggable until you go below "Box 4". This doesn't solve your problem, but perhaps will help you look in a better area for the solution.
See http://jsfiddle.net/nkBNP/7/ for a JSFiddle that demonstrates what I mean.
At least for the top down drop in I think the solution is somewhere in setting the box class to draggable and link it to the sortable object.
$(".box").draggable({
tolerance: 'point',
connectToSortable: '.column',
snap:false,
helper : 'clone',
});
This example creates a duplicate of the box but it does allow me to drag box 1 up to page 2 and slowly drag it down above box 5 and get placed into the top spot. It is very sensitive though. You may need to adjust the grids and snap to get it to work consistently for the casual user.
I can certainly imagine that a sortable object wouldn't expect something to come down from the top, because it expects things to be sorted from within the container. Droppable on the other hand expects things to enter from any direction.
Yeah adding $('.column').sortable("refresh");
to end of the show_page(id) function worked for me (only tested in firefox minefield):
function show_page(id) {
$('.page').removeClass('page_active');
$('#page_'+id).addClass('page_active');
$('.column').sortable("refresh");
}
Adding #edtechdev's answer to tolerance: 'intersect produced something I thought might satisfy you, Whit:
$(".column").sortable({
connectWith: '.column',
opacity: 0.4,
tolerance: 'intersect', //<--changed
placeholder: 'place_holder',
helper: function(event, el) {
var myclone = el.clone();
$('body').append(myclone);
return myclone;
},
}).disableSelection();
// ...
function show_page(id) {
$('.page').removeClass('page_active');
$('#page_'+id).addClass('page_active');
$('#page_'+id).find('.column:first').sortable('refresh'); //<- added
}
Check out drag and drop portal built using jQuery and Asp.Net MVC, it has all implementation in blog posts: http://lakkakula.wordpress.com/2009/06/15/web-2-0-portal-using-asp-net-mvc-microsoft-ajax-client-templates-and-jquery-with-drag-and-drop-widget-personalization/
Sortable has an undocumented option refreshPositions which automatically updates the position of your droppables when they are sortable as well. This prevents the placeholder from being droppable instead of the actual droppable.