working with jQuery sortable and draggable - javascript

I've built a sortable and connected with a draggable list just like plenty of others. However, if I don't use the clone helper on the draggable, the drag placeholder gets offset and the placement of it gets messed up. But when I do use clone, the cloned item doesn't have the item ID, which I was intending to pass back to the server on stop.
What's the best way to handle this? Should I use a data element on the li to store the 'value' of the li?
Second questions-- on stop I want to remove a class from the dropped element, and add a new class. However I can't figure out how to reference this element. this doesn't work, and the other objects passed in to the stop event are ui and event-- ui.helper looked like it may have the info I need, but this doesn't seem to work either.
Thanks!
Fiddle here:http://jsfiddle.net/37tdS/

Related

Combining VueJS V-if directive with Vue Draggable

I'm struggling to combine a list with a v-if directive in a Vue-Draggable component.
The use case is that users can order items in a long list, but also 'hide' sections of that list. The problem I encounter is that right after hiding items, VueJS draggable does not update the index. The strange thing is that after one-drag and drop event is completed (and has dropped the element in the wrong place due to the mismatch in index), the issue is resolved and subsequent drag and drop actions follow the view.
What I've tried:
Bind the elements with a :key variable
Use NextTick statements in all of the events that VueJS Draggable
fires (change, update, sort, move, start, end, etc)
Manually correct the oldIndex and newIndex value based on a second, fixed key parameter. I somehow seem to be unable to interfere with these indices being determined by the sortable plugin.
Manually emitting events to update the Draggable element after hiding/showing.
Does anyone have examples of succesfully combining show directives with draggable components?
OK, so the key here was in the difference between the V-if and V-show directives. I was using the former, which removes the items from the DOM and causes the update problems.
If you use the latter, the DOM items will basically stay intact and the issue doesn't exist in the first place. Closing and leaving here in case someone stumbles over the same issue.

Select2 dropdown menu persists after select removed from DOM

I am using select2 version 4.0.2(rc1)
What I am seeing is that when using select2 with isMultple=true, opening the dropdown and then dynamically removing the select from the DOM, the menu sticks around.
You can see it happening in the select2 examples by focusing on control so you see the time zone options, then in the console typing $('.s2-example').remove(). The list of options sticks around.
Edit: Above is an example of what I am trying to work around. What is happening in my case is the dom is being manipulated to remove the select box by a framework in such a way that I can't hook into it before it happens. What I am trying to do is find a way to respond to the element being removed in the hopes that I can manually remove the options list if it exists.
I'm trying to figure out a clean approach to handling this. I've tried hooking into destroy like so:
$("#select-2-id").on("destroy", function(){...})
but destroy doesn't appear to be fired.
I have considered using a mutation observer but that feels kind of hacky to me. Could anyone suggest a better way to handle this? Any advice would be appreciated. Thanks!
Definitely buried in the documentation (under adapters), but you should be calling the destroy method on the select by passing "destroy" to the jQuery object's .select2() method
$(".js-example-basic-multiple").select2('destroy');
This destroys the instance. You can then safely call .remove()
$(".js-example-basic-multiple").select2('destroy').remove();

insert widget in dojo/dnd source

I am using dojo/dnd to drag and drop and rearrange an array of widgets
Current I am inserting nodes to drag and drop source using following code
dragDropSourceNode.insertNodes(false, [widget.domNode]);
Instead of inserting the domNode can I insert the widget itself.
My widgets have widget_number attribute(property) assigned to it and I have an array of widgets.
Every Time there is a drag and drop, I need to change the widget_number. Also i need to rearrange the array.
But since I am sending the domNode inside, there is no way I can change the widget itself or call any function of the widget.
Is there a way to link both of them?
From domNode get widget_id and do registry.byId to get the widget and everytime there is a drag drop event, recreate the array based on the updated nodes in drag drop object.

Deleting an element after jsPlumb.draggable() in a droppable's drop: function

I want to make a delete area, where any element which is dropped gets deleted.
Hence I implemented this as a droppable with drop:function(event,ui){ui.helper.remove()}.
This doesn't work with jsPlumb.draggable().
The JSFiddle
This works fine when I make the elements draggable with Jquery UI $(...).draggable().
Hence it appears that jsPlumb.draggable($(...),{}) doesn't use a helper. Calling ui.draggable.remove() deletes many more elements.
I think there's nothing in jsPlumb documentation or StackOverflow about this specific issue.
Any ideas?
Now the best solution would be without an elseif ladder to check for various implementations from various plugins, if possible.
As you have mentioned that with jQuery draggable everything works fine then I would suggest you to replace the jsPlumb draggable as:
droppedEleClone.draggable({
snap: '.dragme',
drag:function(e){
jsPlumb.repaint($(this));
}
});
And also while cloning make sure that you provide different ID's. DOM elements having same ID's doesn't yield proper result.
Because of cloning the same object it's difficult to identify the right one and deleting it. Hence provide different ID's.

Javascript drag and drop.... the receiving object?

Ive written some code so that i can drag an object, but eventually i wish to place this on a particular object and then call some functions.
How do i add a listener to the destination object, when i dont know which actual object will be dropped onto it?
In simple way you must attach some function on mousemove. This function must get round all dom elements and find your element. But it is DOM, and it so long. You must cache elemetns position and it will be fine.
i highly recommend using jquery ui draggable and droppable. no need to re-invent the wheel for this!
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
There are a couple ways that I've handled this in the past. They both depend on the cursor being outside the element you're dragging.
First, you could define a mouseup event handler on the document level, and determine which element was the target of the event. That element will be the element that your draggable item was dropped on to, and you can handle the event from there.
Second, you could define a mouseup event handler for each droppable area. This allows easier customization of the handler.
Keep in mind that both of these solutions rely on the cursor being outside the element you're dragging. Otherwise, the target of the event will always be the element you're dragging.
Do you simply want to have a 'drop' event on DOM elements but think you need to care what is being dropped onto them?
My initial approach to similar issues started with the 'drop', not the drag, but found that the 'ondrop' event is not very portable, implying I should use a framework like jQuery instead. See:
See here for a jQuery UI framework approach with demo:
http://jqueryui.com/demos/droppable/
See here for a less framework oriented approach with some disscusion on the topic:
http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

Categories