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.
Related
I am looking to create a tool where I can drag an image from one div to another and on drop, the following to happen:
1 - The dragged image returns to where it came from
2 - A series of controls are added within a container
Similar to https://formbuilder.online/ when a textbox is added to the form.
I understand how to perform the drag (i.e. make the item draggable) and I can understand the drop event. I'm struggling to return the dropped object back to it's original location.
The overall aim is to drop a list item into a sortable list so I can reorder the items (it's similar to the formbuilder linked above, but for a custom application, nothing to do with forms.
I'm just not sure what I need to put into my dropEvent function to return the dragged item to it's location. I can use jQuery append to add the list item containing the controls I want to the list, so that should be fine, it's just the returning the item to where it came from.
Sory, have just seen the documentation and the revert option when making an item draggable.
You might wanna try jQuery Sortable:
https://jqueryui.com/sortable/
The page I am developing requires that there be two lists, one of which to add items to and then order those items. I am using Jquery plugin called nestable where you can drag and drop list items. it works fine when there are items prepopulated in the list, but when i make an empty list i cannot drag items onto it. I have tried using the dd-empty class everywhere (divs in different locations the ol class, the li class) and nothing seems to work completely. The closest thing that works is setting the ol class to dd-empty. it creates an empty "slot" which i can drag one item to, however it does not allow me to drag anymore items or drag that item back to the original list.
Am i doing something wrong? maybe in my CSS? or is this just a bug that nestable has?
Let me know if you have any questions or need to see my code.
figured it out. set maxDepth to 0 to try to get rid of the nesting capability (why use nestable without nesting? stupid i know). switching it to 1 solved the problem.
Edit nestable.js and add style min-height to:
if (!this.dragRootEl.find(opt.itemNodeName).length) {
this.dragRootEl.append('<div class="' + opt.emptyClass + '" style="min-height:30px">');
}
Then you will drag to an empty list
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
I have one button, and when i click it it adds elements that are with same class, for example my class is image_class, the default added elements are being dragged, but when i add new element with the class i can't drag it or sort it.How can i fix that ?I want when dynamically added element shows up to be dragged or sorted .There is no problem with the default ones.
I'm using jquery ui
Okay, here's one way of doing it (and since I have no idea what your button code does...)
http://jsfiddle.net/TrowthePlow/qZz5j/
By default, events are added at runtime and not bound to elements created after the point of binding, even when they have the same selector.
To make sure that events are bound to items with the same selector dynamically, make sure you use the jQuery live method to bind your events.
$('.clickme').live('click', function() {
// Live handler called.
});
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.