How to implement drag drop of html elements in VueJs - vue.js

If I would like to implement drag drop similar to JQuery with vuejs how would I do that ? How to move the elements in the DOM ?
I don't want to use a plugin I want to understand how to do it.
Thanks.

When you start to drag a node save a reference of that node.
When you drop that node use that reference.
Make container draggable.

Related

How to add div next to <ul> in bootstrap-vue dropdown-toggle?

I am using bootstrap-vue library, and I am using component to generate dropdown. However i need to add additional button. This button need to be located right after in DOM, but i have not found a way how to make it possible. If i write this button just inside component, it is not generated at all, and if i write button outside of , it is not generated after . Is there any way to generate my button right after by using v-slot or something else?

Materialcss modal not working with datatables.js

I am trying to build an admin dashboard using material design framework. As a part of it, I am trying to add modal-trigger element inside a <td></td> tag of a table that uses datatable.js library. But when I click on the trigger no modal is appearing. Did anyone face similar issue before?
I think that what's happening is that your trigger isn't in the DOM when you draw the table, but without seeing your code I can't be sure. Generally, it will trigger a modal when it is clicked or something? You might want to change the actual triggering to clicking on a td with a given class contained within the table so something like this:
$(".modal-trigger").click(function(){//Open Modal});
This would work on the first page but not after the first draw of the table as the event had been registered before the elements were within the DOM. Rather, you'd need to listen to the click within the table like this:
$("#table-id").on("click", ".modal-trigger", function(){//Open Modal});
I hope that makes sense and that it helps, if not perhaps work up a JSFiddle illustrating your issue?

Creating div container in DOJO

I want to create the DIV container and format the container with shadow, and other nice look and feel. Because the page will have multiple containers and each will have the different data. I want to do that with DOJO, which component is most suitable for that?
As I understand you, you want to create a div element and style it. Then you should look into dojo/dom-construct and dojo/dom-style

How to highlight a specific tree node in xpage programmatically?

I have a dijit.tree in xpage. I want to select a specific tree node when the page is rendered.
In dojo reference guide,There is a example contains workaround code for this problem, as well as an example call to tree.attr('path') if you already know the full path to the tree node you want to highlight. But i want to highlight the node automaticlly when the page is rendered.
What's the more idiomatic way of doing this? Thanks a lot!
You can add a XSP.addOnload(function(){....}) call in an Outputscript element to render the highlight.

Trying to make dynamically created element draggable

I'm trying to create a dynamic input element that is draggable. Now the problem is I create an element but when I use something like
$("#in"+index.toString()).draggable({cancel:true});
after I append it to the container div, it's not working. Basically it's not working for the dynamically created input element of a certain id. Here's the code and please feel free to point out problems. I could really use some help on this one. Thanks!
http://jsfiddle.net/ithril/hRCun/5/
The problem is that you are creating a new element that is not bound to the UI functions. I would suggest using clone(true,true) and then changing the parameters of the cloned element as need be. You can learn more about clone here. http://api.jquery.com/clone/