jquery nestable cannot drag to an empty list - javascript

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

Related

jQuery drag an item to area and render controls

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/

Remove droppable element with Angularjs Drag&Drop

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.

multiple items in container (drag and drop)

I have a problem with my drag and drop code. I want to put multiple items (dragged) in three containers (drop), and then return all values put in the container (thanks to alert(droppableResults);). But this code only returns the first item dropped, and I went all of the items.
Thanks for your help!
I put code in jsfiddle.net for better understanding.
https://jsfiddle.net/vbyyvt2o/1/
The problem you have is that the data-r="" value gets overwritten with every drop.
This results in only the last drop being recorded (not the first one).
Since .dropAble can contain several elements that approach doesn't work. You might however remove the data-r attribute from .dropAble and add a data-q attribute to your.dragAble elements. Then you could modify your JS accordingly and it should work fine.
Here is a modified fiddle:
https://jsfiddle.net/vbyyvt2o/4/

Changing the height of the object being sorted?

I have a JQuery Sortable list with the ability to multi-select objects inside the list and sort them accordingly. This works fine, and is even interacting with a multi-select draggable list, but the one problem I can't seem to find the answer to is how the placeholder decides its position in the list. I currently set the Sortable helper much like you'd expect:
helper: function (e, element) {
var elements = $(element).parent().children('.highlighted').clone(); //all the items which are highlighted
$(element).data('multidrag', elements);
$(element).siblings('.highlighted').remove();
var helper = $("<div/>");
return helper.append(elements);
}
But when I have more than one item selected, and I want to move them down a position, the placeholder does not change. I would like to solve this without changing the size of the placeholder, since I feel that that wastes space. To illustrate what's happening:
Is it possible to register the size of this object as a single item of the list? Or somehow refresh the list so that the sort works as intended? Once a new placeholder is created, this issue disappears, so maybe it's possible to force a redraw on the placeholder? I've looked into each of these avenues, but none seem to be working for me. If more code is required to reproduce this, please let me know.

jQuery UI Sortable doesn't refresh after cloning and appending a new sortable list

OK, what I'm trying to do here is to have jQuery UI update the sortables that are displayed on the page when a new column is dynamically added to the page by cloning it. If you clone a column (demo page) the new column should be able to receive both items from the existing column lists as well as new items that can be dragged from list A at the top into one of the sortables. This works fine for the initial setup, but as soon as you clone and append a new column, things break; the newly cloned column is not recognized as a droppable target and I can also not drag new items from list A to the newly cloned column list.
Intuitively the sortable('refresh') command should be enough for the sortable to check if anything in the setup is changed and enable new elements to receive and handle sortable items. However, I try to do this when the button is clicked, but there seems to be no effect.
I also tried to bluntly call the whole sortable() plugin on the '.columnlist' selector again, hoping that it would initialize on new matched elements and would simply skip over the elements that have the sortable already.
Oh and of course I use clone(true, true) to make sure events and data come with it.
Please see the demo page here: http://labs.shifthappens.nl/dragsort/
Try the following:
Drag an item from list A to column list A or B. The drag to sortable works
Re-order items in column list A. Sortable works.
Click on the clone button. A clone of column C appears.
Try to drag any item (be it from list A or from another column list) to the cloned column C and behold: it does not respond. It is as if it doesn't exist.
Funny thing: if you already put items in the original column C and then clone it, the items that are in the cloned column CAN be moved to other lists, but once out, can't be moved back to the cloned list. As if it rejects its own offspring.
How can I make the cloned list(s) to be sortable and valid dropzones as well?
As pointed out by jaredhoyt it indeed was about deep cloning. Apparently jquery ui doesn't need deep cloned elements and in fact breaks if you do that and expect the new elements to be droppable targets too.
However I did find the need to do another $('selector').sortable() on the columns for the cloned list to be recognized. This is what jaredhoyt also did in his fiddle. This while for me intuitively the 'refresh' method would be the most elegant solution, no?
Anyway, case closed. I'm happy it was as simple as not cloning the column with data and events, just the HTML.

Categories

Resources